0

I want when user reached says div#btm, it will fade out. I know how to do the css part, just add transition and opacity 0. But how to use scrollTop to check whether the users has scrolled until that element?

I don't want to use outerHeight as my element is not exactly at the bottom of the window.

user3836151
  • 231
  • 3
  • 5
  • 11
  • This question has been asked and answered a lot on stackoverflow. For example: http://stackoverflow.com/questions/17441065/how-to-detect-scroll-position-of-page-using-jquery You may also want to look for a javascript library that can handle such things for you. For example if you Google for "parallax javascript scrolling library" you will find several javascript libraries that can handle what you asked and more fancy stuff. – vrijdenker Aug 13 '14 at 09:04

1 Answers1

1

Follow the following code snippet

There are some properties/methods you can use:

$().scrollTop()//how much has been scrolled
$().innerHeight()// inner height of the element
DOMElement.scrollHeight//height of the content of the element

So you can take the sum of the first two properties, and when it equals to the last property, you've reached the end:

jQuery(function($) {
    $('#flux').bind('scroll', function() {
        if($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight) {
            alert('end reached');
        }
    })
});

or

$(document).ready(function() {
                   $('#btm').bind('scroll', function() 
                  {
                  if($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight) 
                      {
                         alert('end reached');
                      }
                  });
                 });
Saswat
  • 12,320
  • 16
  • 77
  • 156