Div fadeIn/Out 滚动 + 页面顶部可见性

Question

我目前正在使用：

<script>
$(window).scroll(
    {
        previousTop: 0
    }, 
    function () {
    var currentTop = $(window).scrollTop();
    if (currentTop < this.previousTop) {
        $("#menu").fadeIn();
    } else {
        $("#menu").fadeOut();
    }
    this.previousTop = currentTop;
});
</script>

让我的页面菜单在向下滚动时淡出，在向上滚动时淡入，这很有效。不起作用的是，当我位于页面顶部时，我需要始终可见。

我找到的唯一解决方案是禁用滚动解决方案上的淡入淡出 in/out，我正在尝试找到一个两者都可以协同工作的解决方案。前任。滚动顶部 200px 时始终可见，但在滚动 up/down 上具有淡入淡出 in/out 的功能。有什么建议么？谢谢！

Answer 1

我建议您在页面顶部添加一个类名。然后你可以用 css 设置它的样式，使其始终在顶部可见。

<script>
$(window).scroll(
    {
        previousTop: 0
    }, 
    function () {
    var currentTop = $(window).scrollTop();
    if ( currentTop == 0 ) {
         $("#menu").addClass('static-on-top');
    } else {
        $("#menu").removeClass('static-on-top');
        if (currentTop < this.previousTop) {
            $("#menu").fadeIn();
        } else {
           $("#menu").fadeOut();
       }
    }
    this.previousTop = currentTop;
});
</script>
<style type="text/css">
.static-on-top {
      display: block !important;
}
</style>

Answer 2

我编辑并试用了代码。最好的解决方案是删除 fadeOut:

<script>
$(window).scroll(
    {
        previousTop: 0
    }, 
    function () {
    var currentTop = $(window).scrollTop();
    if ( currentTop == 0 ) {
         $("#menu").addClass('static-on-top');
    } else {
        $("#menu").removeClass('static-on-top');
        if (currentTop < this.previousTop ) {
            $("#menu").fadeIn();
        } else  {
           $("#menu").hide();
       }
    }
    this.previousTop = currentTop;
});
</script>
<style type="text/css">
.static-on-top {
      display: block !important;
}
#menu {
    position: fixed;
    height: 30px;
    background: red;
    width: 100%;
    top: 0;
    left: 0;
}
</style>
<div id="menu">
    Menu
</div>

Div fadeIn/Out 滚动 + 页面顶部可见性

Div fadeIn/Out on scroll + visibility on top of page

jquery

scroll

visible

fadeout

fadein