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

Question

我想在用户向下滚动页面时隐藏导航栏，并在用户向上滚动页面时显示它。 我正在使用下面的代码，它工作正常。 我唯一的问题是语句的“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>

Answer 1

您需要检查当前的顶级 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，因为它的填充 20+20 和 font-size: 16。这可能不完全正确，但大致正确。

Answer 2

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