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

Question

I want to hide the navigation bar when a user scroll down the page and show it when the user scroll the page up. I 'm using the code below and it works ok. The ONLY problem i have is that the "else" part of the statement doesn't work. To be more specific, when the page reach at the top again the "navigation-bar" div should be positioned absolute and have 20px padding on top and bottom. What i 'm doing wrong?

 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>

Answer 1

You need to check current top position:

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, because its paddings 20+20 and font-size: 16. This may not be entirely correct, but approximately.

Answer 2

First thing I noticed in your CSS file was the relative and absolute positions within your style rule, please remove the position: relative . The problem with your code your condition lastScroll - scroll > 0 since lastScroll starts from 0 and scroll counts up from 0 your else block runs before you need it hence the unexpected behavior. you can fix it by reversing the condition like this scroll - lastScroll > 0 . I debugged it on code pen already and it works that way. #cheers