向下滚动100%屏幕高度后更改CSS类

Question

我正在制作一个单页网站，我想在第二部分显示导航菜单直到结束。我发现了这个问题:向下滚动1000px后改变CSS类

…我用的答案是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

可以用$(window).height()代替1000

:

$(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
    }
});

理论上，它适用于任何屏幕尺寸