Question

我正在使用一个导航栏来交换课程以淡入淡出背景。

我已经定位了窗口本身并收听滚动，确定用户在页面下方的距离，如果用户进一步低于800px，导航栏应淡出，如果用户向上滚动到在顶部，导航栏应该再次淡入

这就是我所拥有的：

使用Javascript： $（window）.scroll（function（）{ if（$（this）.scrollTop（）＆gt; 800）{ $（“＃nav”）。removeClass（'。menuOut'，500）; $（“＃nav”）。addClass（'。menuIn'，500）;

        } else {
            console.log('there');
            $( "#nav" ).removeClass('.menuIn', 500);
            $( "#nav" ).addClass('.menuOut', 500);

        }
    });
</script>

导航栏：

<nav id="nav" class="navbar menuIn">
    <!--Content-->
</nav>

CSS：

.menuIn {
    background-color: rgba(50,50,50,50.3);
}

.menuIn {
    background-color: rgba(50,50,50,1);
}

（我的意思是：http://www.albdifferent.com/）

Answer 1

尝试使用以下代码，它可能会对您有所帮助。

    $(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 800) {
        $("#nav").removeClass("menuOut");
        $("#nav").addClass("menuIn");
    } else {
        $("#nav").removeClass("menuIn");
        $("#nav").addClass("menuOut");
    }
});

在JQuery中滚动类交换

1 个答案: