滚动时隐藏导航栏的上部（平滑！）答案

【问题标题】：Hide the upper part of the navbar when scroll (smoothly!)滚动时隐藏导航栏的上部（平滑！）
【发布时间】：2020-04-17 14:55:27
【问题描述】：

您好，我自定义了一个 2 行的 Bootstrap 导航栏（上半部分只是徽标和社交链接，下半部分是导航链接）。我试图在滚动时隐藏上部，但我找不到顺利完成它的方法。我认为下面的代码是我找到的最佳解决方案，但目前transitionend 上的事件监听器不起作用，并且从未添加过“隐藏”类。

var scrollpos = window.scrollY;
var header = document.getElementById("header-up-section");

function add_class_on_scroll() {
    header.classList.add('visuallyhidden');
    header.addEventListener('transitionend', function(e) {
      header.classList.add('hidden');
    }, {
      capture: false,
      once: true,
      passive: false
    });
}

function remove_class_on_scroll() {
     header.classList.remove('hidden');
    setTimeout(function () {
      header.classList.remove('visuallyhidden');
    }, 20);
}

window.addEventListener('scroll', function(){

    scrollpos = window.scrollY;

    if(scrollpos > 20){
        add_class_on_scroll();
    }
    else {
        remove_class_on_scroll();
    }
    console.log(scrollpos);
});

*/and CSS :

#header-up-section.visuallyhidden {
  opacity: 0;
}

#header-up-section.hidden {
  display: none !important;
}

header-up-section 变为不可见，但 div 未隐藏。有什么好办法吗？

【问题讨论】：

标签： javascript css scroll navbar transitionend

【解决方案1】：

终于不用 JS 来做这件事了。只需要 2 个引导导航栏并将引导类“sticky-top”添加到第二个（这是两行导航栏的伪“向下部分”）。它完美地完成了这项工作;)

【讨论】：