向下滚动时隐藏导航栏并在用户使用 jquery 向上滚动页面时显示它，不能正常工作

Posted 2023-02-24

【中文标题】向下滚动时隐藏导航栏并在用户使用 jquery 向上滚动页面时显示它，不能正常工作

【英文标题】：Hide navigation bar on scrolling down and show it when user scroll the page up using jquery, doesn't work quite right

【发布时间】：2019-11-15 23:20:34

【问题描述】：

我想在用户向下滚动页面时隐藏导航栏，并在用户向上滚动页面时显示它。我正在使用下面的代码，它工作正常。我唯一的问题是语句的“else”部分不起作用。更具体地说，当页面再次到达顶部时，“导航栏”div 应该绝对定位，并且在顶部和底部有 20px 的填充。我做错了什么？

lastScroll = 0;
$(window).on('scroll',function()     
    var scroll = $(window).scrollTop();
    if(lastScroll - scroll > 0) 
        $(".top-navbar").css("padding-top","0px");
        $(".top-navbar").css("padding-bottom","0px");
        $(".top-navbar").css("background","red");
        $(".top-navbar").css("position","fixed");
        $(".top-navbar").css("top","0px");
        
     else 
       
        $(".top-navbar").css("padding-top","20px");
        $(".top-navbar").css("padding-bottom","20px");
        $(".top-navbar").css("background","#00bbcf");
        $(".top-navbar").css("position","absolute");
        $(".top-navbar").css("top","0px");
    

    lastScroll = scroll;
);

.top-navbar 
    width: 100%;
    z-index: 1;
    position: relative; 
    position:absolute;
    top:0px;
    left:0;
    padding-top: 20px;
   padding-bottom:20px;
   background:#00bbcf;
   color:#fff;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>


<div class="top-navbar">Navigation Bar</div>
<div class="dummy-content">
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. It usually begins with:

    “Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”

The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn't distract from the layout. A practice not without controversy, laying out pages with meaningless filler text can be very useful when the focus is meant to be on design, not content.

The passage experienced a surge in popularity during the 1960s when Letraset used it on their dry-transfer sheets, and again during the 90s as desktop publishers bundled the text with their software. Today it's seen all around the web; on templates, websites, and stock designs. Use our generator to get your own, or read on for the authoritative history of lorem ipsum. 
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. It usually begins with:

    “Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”

The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn't distract from the layout. A practice not without controversy, laying out pages with meaningless filler text can be very useful when the focus is meant to be on design, not content.

The passage experienced a surge in popularity during the 1960s when Letraset used it on their dry-transfer sheets, and again during the 90s as desktop publishers bundled the text with their software. Today it's seen all around the web; on templates, websites, and stock designs. Use our generator to get your own, or read on for the authoritative history of lorem ipsum. 
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. It usually begins with:

    “Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”

The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn't distract from the layout. A practice not without controversy, laying out pages with meaningless filler text can be very useful when the focus is meant to be on design, not content.

The passage experienced a surge in popularity during the 1960s when Letraset used it on their dry-transfer sheets, and again during the 90s as desktop publishers bundled the text with their software. Today it's seen all around the web; on templates, websites, and stock designs. Use our generator to get your own, or read on for the authoritative history of lorem ipsum. </div>

【问题讨论】：

jsfiddle.net/923Lav0w/2

是的！这正是我想要的！谢谢你。您能否将此作为答案而不是评论，以便我可以接受它作为最佳答案？

【参考方案1】：

你需要检查当前的最高位置：

lastScroll = 0;
$(window).on('scroll',function()     
    var scroll = $(window).scrollTop();

    if((lastScroll - scroll) > 0 && scroll > 56) 
        $(".top-navbar").css("padding-top","0px");
        $(".top-navbar").css("padding-bottom","0px");
        $(".top-navbar").css("background","red");
        $(".top-navbar").css("position","fixed");
        $(".top-navbar").css("top","0px");        
     else 
        $(".top-navbar").css("padding-top","20px");
        $(".top-navbar").css("padding-bottom","20px");
        $(".top-navbar").css("background","#00bbcf");
        $(".top-navbar").css("position","absolute");
        $(".top-navbar").css("top","0px");
    

    lastScroll = scroll;
);

scroll > 56，因为它的填充 20+20 和字体大小：16。这可能不完全正确，但大致正确。

【参考方案2】：

我在您的 CSS 文件中注意到的第一件事是您的样式规则中的 relative 和 absolute 位置，请删除 position: relative。您的代码问题lastScroll - scroll > 0 因为lastScroll 从0 和scroll 开始计数，从0 您的else 块在您需要它之前运行，因此会出现意外行为。您可以通过像scroll - lastScroll > 0 这样反转条件来修复它。我已经在代码笔上调试过它，它就是这样工作的。 #干杯