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

【问题标题】：Change CSS class after scrolling 100% screen height down向下滚动 100% 屏幕高度后更改 CSS 类
【发布时间】：2013-03-04 15:41:52
【问题描述】：

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

...我使用了 AlienWebguy

的答案

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

但我不想做 1000 像素。我想使用它 100% 的屏幕，它可以随着不同的平台或分辨率而改变。

你知道我能做什么吗？

【问题讨论】：

只要找出屏幕有多大，然后用它来代替 1000
Change CSS class after scrolling 1000px down的可能重复

标签： jquery css scroll

【解决方案1】：

使用这个：

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

});

【讨论】：

【解决方案2】：

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

如：

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

【讨论】：

【解决方案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
    }
});

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

【讨论】：