Question

我正在创建一个单页网站，我想在第二部分显示导航菜单直到结束。我发现了这个问题： Change CSS class after scrolling 1000px down

...我使用了 AlienWebguy

的答案

$(document).scroll(function() {
    $('#menu').toggle($(this).scrollTop()>1000)
});

但我不想做1000px。我想使用100％的屏幕，它可以用不同的平台或分辨率进行更改。

你知道我能做什么吗？

Answer 1

使用此：

$(document).scroll(function() {
    var windowHeight = $(window).height();
    $('#menu').toggle($(this).scrollTop()>windowHeight)

});

Answer 2

您可以将1000替换为$(window).height()

如：

$(document).scroll(function() {
    $('#menu').toggle($(this).scrollTop()>$(window).height())
});

Answer 3

您可以使用：

$(document).on("scroll", function(){
    if($(document).scrollTop() >= ($(document).height() - $(window).height())){
        //here, you're at the bottom of the page
        console.log("BOTTOM");
    } else {
        //here, you're not arrived yet
    }
});

理论上它适用于每种屏幕尺寸。

滚动100％屏幕高度后更改CSS类

3 个答案: