1

您好，我定制了一个 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 未隐藏。有什么想法可以帮忙吗？

4

1 回答 1

0

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

于 2020-05-10T10:16:17.503 回答