javascript - 粘性菜单，向下滚动时隐藏粘性菜单

Question

我正在尝试在我的网页上添加一个粘性菜单。如果我向下滚动，粘性菜单必须消失，当我向上滚动时它必须出现。我浏览了互联网并找到了一些答案。但它没有按预期工作。我尝试了2个案例。

情况1：

我在CSS和JS下面试过：

CSS：

@media (min-width: 769px) {
    .main-navigation {
        position: sticky;
        top: 0px;
        z-index: 99;
    }
}

JS：

jQuery(document).ready(function( $ ){
  var previousScroll = 0;
  $(window).scroll(function(){
       var currentScroll = $(this).scrollTop();
       
       if (currentScroll >= previousScroll){
           $('#primary-menu').addClass('menu-toggle');
       } else {
           $('#primary-menu').removeClass('menu-toggle');
       }
       previousScroll = currentScroll;
    });
  
});

当我尝试上面的代码时，它运行良好，但有时粘性菜单会像手电筒一样闪烁。

然后我尝试了下一个案例。

案例二：

CSS：

@media (min-width: 769px) {
    .main-navigation {
        position: fixed;
        top: 0px;
        width:100%;
        z-index: 99;
    }
}

JS：

jQuery(document).ready(function( $ ){
  var previousScroll = 0;
  $(window).scroll(function(){
       var currentScroll = $(this).scrollTop();
       
       if (currentScroll >= previousScroll){
           $('#primary-menu').addClass('menu-toggle');
       } else {
           $('#primary-menu').removeClass('menu-toggle');
       }
       previousScroll = currentScroll;
    });
  
});

在这种情况下，它不会闪烁。但它与标题重叠。请看这里的图片。

实际上，菜单必须在标题之后。谁能帮我解决这个问题？

标签： javascriptjquerycssthemes