Scroll to certain height of a page javascript

Question

I've a very simple one line code that checks whether user has scrolled to the bottom of the page, I want to change it a little bit & find whether user has reached the footer of the page. And height of footer is somewhat 350px.

Here's my code:

if($(window).scrollTop() + $(window).height() == ($(document).height())
{
...
}

This works like a charm (loads more content on scroll event), but if I do like this:

if($(window).scrollTop() + $(window).height() == ($(document).height()-350))

This doesn't work. When I attempt to alert('$(document).height()-350') . It gives a perfect alert.

Can anyone say what I'm doing wrong?

Answer 1

you are probably scrolling more than 1 pixel at a time and just skip the equality point. make it a >= and it should work:

if($(window).scrollTop() + $(window).height() >= ($(document).height()-350))

Answer 2

Try

if($(window).scrollTop() + $(window).height() >= $(document).height()-350)

Also you have '(' char in front of $(document).height() which needs to be removed

Answer 3

You want to use >= instead of == , otherwise you must be pixel-perfect in your scroll in order for the event to fire.

Give this a try. You can use the .offset().top of your footer element to get the Y-position relative to the document.

var scrollBottom = $(window).scrollTop() + $(window).height();
var footerTop = $('#footer').offset().top; // change selector as needed

if ( scrollBottom >= footerTop ) {
  alert("hello footer");
}