滚动时隐藏导航条的上部(平滑！)

Question

你好，我定制了一个Bootstrap导航栏，有两行(上部只是徽标和社交链接，下部是导航链接(。我试图在滚动时隐藏上半部分，但我找不到一种平滑的方法。我认为下面的代码是我找到的最好的解决方案，但目前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;
}

header-up部分将不可见，但div不会隐藏。有什么可以帮忙的吗？

Answer 1

最后JS不需要这么做了。只需要2个引导程序导航栏，并将引导程序类"粘性顶部"添加到第二个导航栏(这是两行导航栏的伪"向下部分"(。它完美地完成了任务；(