How do I detect if a user scrolls downwards with jQuery? I want a fixed div to show only when the browser is within 300px of the top. When the user scrolls down past the 300px mark, it should disappear. When the user scrolls back to the top, it should hide. How do I do this?
+1
A:
var docElem = $(document.documentElement)
docElem.scroll(function(e) {
if(docElem.scrollTop() < 300) {
whatever.show();
} else {
whatever.hide();
}
});
You may have to use a different element (as docElem) in different browsers, but this should work in Firefox. (I haven't tested it)
EDIT: More jQuery
SLaks
2009-08-30 21:27:27
I used some of your code, thanks!
Brandon Wang
2009-08-30 21:42:04
Then why didn't you mark it accepted?
SLaks
2009-08-30 21:43:55
+1
A:
Attach a scroll listener to the window: http://docs.jquery.com/Events/scroll
Then check the scrollTop of window: http://docs.jquery.com/CSS
When scrollTop is less than 300, show() the div, otherwise hide() it.
Xanthir
2009-08-30 21:28:33
Note that scrollTop does NOT work across browsers. You want `window.scrollY` for this test.
Karl Guertin
2010-03-04 00:47:35