javascript - 向下滚动超过 x 像素时隐藏导航栏并在向上滚动时显示

Question

我想在向下滚动时隐藏我的导航栏并在向上滚动时显示，但是在窗口向下滚动 x 页面向下的像素量之后发生向下滚动。（在 #section1 之后的代码中）并且如果向上滚动立即显示导航栏。我正在使用此代码，但我不知道如何定义职位。

var scrollp=0;
(function ($) {
    $(document).ready(function(){
        $(function () {
            $(window).scroll(function () {
                // ask about the position of scroll

                if ($(this).scrollTop() < scrollp) {
                    $('.navbar').fadeIn();
                    scrollp= $(this).scrollTop();
                } else {
                    $('.navbar').fadeOut();
                    scrollp= $(this).scrollTop();
                }
            });
        });

    });
}(jQuery));

标签： javascriptjquery

Answer 1

只需检查 else 子句中的 scrollTop，如下所示：

... else {
    scrollp = $(this).scrollTop();
    if (scrollp > fadeOutAfter) // Set fadeOutAfter to wherever you want the navbar to fade out
        $('.navbar').fadeOut();
}