使用 jquery 取消隐藏页面下方的 header 1/2

Question

我进行了搜索，但无法应用找到的任何答案。

我有一行，我可以用 #header 定位它并附加以下 CSS：

#header {
position: fixed;
top: 0;
z-index:99;
width: 100%;
height: 100px;
display: none;
}

我想知道如何使它在页面上的某个点淡入，并在我使用 jQuery 向上滚动时淡出。

感谢任何帮助或指向相关资源。

到目前为止我有这个但我不知道要添加什么：

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$( document ).ready(function() {

});

Answer 1

您可以使用 jQuery scroll and fadeIn/fadeOut。

例如：

<script>
    $( document ).ready(function() {
        $(window).scroll(function(){
            scroll = $(window).scrollTop();
            if (scroll > 100 && scroll < 300){
                $('#header').fadeOut();
            }

            if (scroll > 300){
                $('#header').fadeIn();
            }
        });
    });
</script>

使用 jquery 取消隐藏页面下方的 header 1/2

Using jquery to unhide a header 1/2 way down a page

jquery

header

sticky