how to detect user is in bottom using javascript in desktop

Question

what i need

when user scroll down the page i need to add class using js.

problem

its appending class at last of scrolling page.
i need to add class 300px above.
```
jsfiddle: http://jsfiddle.net/8PkQN/1/
```

i have tried with : (window.innerHeight + window.scrollY) == $(document).height()

code

    var bottom = $(document).height() - $(window).height();
   if($(window).scrollTop() + 1 >= bottom - 2200==true)
  {
      $(".abslouel_left12").addClass("fixed_left_btm");
  }

working code

          window.onscroll = function(ev) {
     if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
   $(".abslouel_left12").addClass("fixed_left_btm");
 }
};



$(window).scroll(function() {
     $(this).scrollTop() > 75 &&            
  ($(".abslouel_left12").addClass("fixed_left"), 
$('[data-toggle="tooltip"]').tooltip()), 

     $(this).scrollTop() < 75 && ($(".abslouel_left12").removeClass("fixed_left"),

 )

      if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {

$(".abslouel_left12").removeClass("fixed_left");
  }

case 1 when user is at top. no class to be added.
case 2 when user scroll down add class (.fixed_length).
case 3 when user scroll to bottom add class(.fixed_length_btm) but the issue is case 3 code is working end of scrolling browser i need it should above footer of page .

Possible duplicate of [Javascript: How to detect if browser window is scrolled to bottom?](http://stackoverflow.com/questions/9439725/javascript-how-to-detect-if-browser-window-is-scrolled-to-bottom) — Liam, Oct 23 '15 at 14:20
If any answer below uses `==` instead of `>=`, feel free not to trust them in production. — Brian, Oct 23 '15 at 14:30
@Brian Oddly enough, i scoffed a little at your comment until I played around a little and found when I was trying to just find above footer had been reached == did NOT work like it did for just the bottom of the page. If you scroll very quickly it doesn't always hit. I updated my answer. You sir are correct! — AtheistP3ace, Oct 23 '15 at 14:44

AtheistP3ace · Accepted Answer · 2015-10-23T14:40:05.543

1

This has always worked for me:

if (window.pageYOffset == $(document).height() - $(window).height()) {
    // bottom of page
}

If you want to know they reach above footer you can add the footer height into the calculation.

if ($(window).scrollTop() >= $(document).height() - $(window).height() - $('footer').height()) {
    // top of footer
}

Fiddle: http://jsfiddle.net/8PkQN/449/

Alert happens when you reach the top of footer. Is that what you are looking for?

edited Oct 23 '15 at 14:40

answered Oct 23 '15 at 14:21

AtheistP3ace

9,611
12
43
43

[Always use ===](http://stackoverflow.com/questions/523643/difference-between-and-in-javascript) – Liam Oct 23 '15 at 14:56

Viktor Maksimov · Answer 2 · 2015-10-23T16:58:50.640

0

  $(window).scroll(function(){
    if ($(document).scrollTop() + $(window).height() == $(document).height()) {
      //addClass('fixed_length_btm');
    } else {
      //removeClass('fixed_length_btm');
    };
  });

$(document).scrollTop() will give you the scrolled height. You will be in the bottom of the page when the document height is equal to the scrolled height plus window height.

edited Oct 23 '15 at 16:58

answered Oct 23 '15 at 14:25

Viktor Maksimov

1,465
1
10
11

Could you please add some explanation to your answer? Code-only answers are frowned upon on SO. – honk Oct 23 '15 at 16:52

how to detect user is in bottom using javascript in desktop

2 Answers2