CODEWITHSUNDEEP
javascriptjqueryhtmlcss
good_evening
good_evening

Reputation: 21759

How to know when you scrolled down?

Just visit http://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?

Upvotes: 1

Views: 519

Answers (4)

Kolja
Kolja

Reputation: 2759

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/

Upvotes: 0

guido
guido

Reputation: 19224

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

Upvotes: 1

krichard
krichard

Reputation: 3694

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.');
    });

Upvotes: 1

Guy
Guy

Reputation: 14830

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

Upvotes: 0

Related Questions