Intelligent Scrolling

Question

I was wondering, how some modern websites know, whether I am scrolling. And if so, where "I am" at the moment on the page and then perform specific functions.

For example the page 9gag.com. On the right side is a green button "Y U No Signup?!", when I scroll further down, so that this button disappears, something similar appears on the top of the page.

Another example is the title of every of the pictures. When I'm looking at them and scrolling down, the title "follows me", but only until reaching the end of the particular picture, then it stops.

Answer 1

its easy.. for example with jquery you can call a function within .scroll() triggering whenever you start scrolling... just use .offset() from top or bottom and you have you position and can fire whatever you want

Answer 2

For a similar task I created a small jQuery plugin called «fixedAfter» The main idea behind is to set a static position for such objects and then dynamically changing their position on window scroll event, smthg like

$.fn.fixedAfter = function(pos) {
    var $this = this, $window = $(window), obj;
    $window.bind('scroll.fixedAfter', function(e) {
        obj = ($window.scrollTop() < pos)
            ? { position: 'static' } /* or { position: absolute, top: pos } */
            : { position: 'fixed', top: 0 }
        $this.css(obj);
    });

    /* if a page is loaded by an internal link (e.g. page.html#internal-id) */
    $(document).ready(function() {
        $window.trigger('scroll.fixedAfter');
    })
};

so if you want to fix a button on the top of the viewport, let say after 100px of scroll, just call the plugin with

$('button').fixedAfter(100);