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

Question

I'm making a single page website and i want to show nav-menu on second part till end. I found this question: Change CSS class after scrolling 1000px down

...and i used the answer of AlienWebguy

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

But i don't want to do 1000px. I want to use it 100% of screen that it can change with different platforms or resolution.

Do you know what can i do?

Answer 1

Use this:

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

});

Answer 2

You can replace 1000 with $(window).height()

As in:

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

Answer 3

You can use that :

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

it will work for every screen size, in theory.