How to Detect Scroll Position of Page Using Jquery

How to detect scroll position of page using jQuery

You can extract the scroll position using jQuery's .scrollTop() method

$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    // Do something
});

How do I get the browser scroll position in jQuery?

Since it appears you are using jQuery, here is a jQuery solution.

$(function() {
    $('#Eframe').on("mousewheel", function() {
        alert($(document).scrollTop());
    });
});

Not much to explain here. If you want, here is the jQuery documentation.

How to detect scroll position to execute jQuery

Control it with a higher scoped boolean

var breakpoint = false;

$(window).scroll(function() {
  if ($(this).scrollTop() > 400 && !breakpoint ) {
     doStuff();
  }
  if ($(this).scrollTop() < 400 && breakpoint ) {
     doOtherStuff();
  }
})

function doStuff() {
  breakpoint = true;
  console.log('we passed the breakpoint, do stuff');
}
function doOtherStuff() {
  breakpoint = false;
  console.log('were above the breakpoint, do other stuff');
}

EDIT Added the converse functionality as well for coming back above the breakpoint.

jquery : detecting scroll position

Working DEMO

Try this

$(window).scroll(function () {

    if ($(window).scrollTop() + $(window).height() > $('.footer').offset().top) {
        alert("footer visible");
    } else {
        alert("footer invisible");
    }
});

Hope this helps,Thank you

How can I determine the direction of a jQuery scroll event?

Check current scrollTop vs previous scrollTop

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       // downscroll code
   } else {
      // upscroll code
   }
   lastScrollTop = st;
});

Get scroll position using jquery

cross browser variant

$(document).scrollTop();

Detecting when user scrolls to bottom of div with jQuery

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').on('scroll', function() {
        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
            alert('end reached');
        }
    })
});

http://jsfiddle.net/doktormolle/w7X9N/

Edit: I've updated 'bind' to 'on' as per:

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document.

jQuery detect div location on scroll

Is this what you are looking for? I changed the code quite a bit because it seemed like yours was a little overly complicated. Not sure why you were attaching two scroll events. Also I just added a red border to the stage class so you could clearly see when we were passing the bottom of it.

Fiddle: http://jsfiddle.net/AtheistP3ace/4hs7n0Lq/

var lastScrollTop = 0;
$(window).on('scroll', function() {
    var header = $('.header');
    var stage0 = $('.stage-0');
    var scrollTop = $(window).scrollTop();
    if (scrollTop > lastScrollTop) {
        // down scroll
        if (scrollTop > stage0.offset().top + stage0.height()) {
            header.addClass('hide').removeClass('color');
        }
    } else {
        // up scroll
        if (scrollTop <= stage0.offset().top + stage0.height()) {
            header.removeClass('color headerBGchange headerLIchange');
        } else {
            header.removeClass('hide').addClass('color headerBGchange headerLIchange');
        }
    }
    lastScrollTop = scrollTop;
});

It simply tracks the lastScroll to determine if we are going up or down. If we are going down lets check if we have passed the stage0 div by getting its offset plus its height (the bottom of it). If we are scrolling up lets see if we are above the bottom of the stage0 div, if not we are scrolling up but have not reached it yet.

As to your question about the text color its not working because you set the color on the header which would cascade down but you also have this:

.header ul li {
    display: inline-block;
    margin-right: 20px;
    color: green;
}

Which is a more specific selector so it overrides the higher one. So instead of

.headerLIchange {
    color: Blue;
}

do

.header.headerLIchange ul li {
    color: Blue;
}

Fiddle: http://jsfiddle.net/AtheistP3ace/4hs7n0Lq/1/

jquery detect coordinate of top of page after scrolling

The function which gives you information about where you are in the page is scrollTop(). With it you can detect if you're past a certain point, and then modify the CSS of an item to make it position: fixed, for example.

Here's an example:

$(document).ready(function() {
    $(window).scroll(function() {
        if ($(window).scrollTop() >= 120) {
            $('#topThing').css('position', 'fixed');
        } else {
            $('#topThing').css('position', 'relative');
        }
    });
});

And here's a JSFiddle showing how it works.

---

Related Topics