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

你好，我定制了一个2行引导导航栏（上半部分只是徽标和社交链接，下半部分是导航链接）。我试图隐藏上半部分滚动时，但我找不到一个方法来做它顺利。我认为下面的代码是我找到的最好的解决方案，但目前transitionend上的eventlistener不起作用，并且从未添加“hidden”类

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;
}

---

页眉向上部分变为不可见，但div不隐藏。有什么帮助吗？

最终JS不需要这么做。只需要2个引导导航栏，并将引导类“sticky top”添加到第二个导航栏（这是两行导航栏的伪“向下部分”）。这项工作做得很好；）

最终JS不需要这样做。只需要2个引导导航栏，并将引导类“sticky top”添加到第二个导航栏（这是两行导航栏的伪“向下部分”）。这项工作做得很好；）