How to know when you scrolled down?

Just visit ht开发者_开发技巧tp://techcrunch.com/ and scroll down. How do they do it? How that top line appears with a new logo? Is there any jQuery trick? How to determine when person scrolled down certain amount of pixels and show to him new html?

They might just use jQuery-Waypoints which lets you trigger events if the user "passes" a certain HTML-Element.

Example ( taken from page ):

    $('.entry').waypoint(function() {
       alert('You have scrolled to an entry.');
    });

They are using jquery sonar plugin[1] which defines special jquery events[2].

The trick is putting a static positioned top element, on a very high z-index layer, with the part to be occupied by the dynamic logo initially transparent. When the jquery event is thrown, they just make the new logo visible above any underlying content.

[1] http://artzstudio.com/files/jquery-boston-2010/jquery.sonar/jquery.sonar.js
[2] http://benalman.com/news/2010/03/jquery-special-events/#api

Maybe they use window.pageYOffset and there is also document.documentElement.scrollHeight and finally they use the window.onscroll event.

They use the window.scroll() function to listen for the scroll event, then use window.scrollTop() to determine the offset of the logo from the top of the page. see: http://jsfiddle.net/XkMrc/2/