Completed project can be Download from here.
In this tutorial color of a div(div with ID "maincontent") is changed when a user is scrolling the page,
Here is how it can be done.
- Add onscroll attribute in the element which you need to detect scroll on.
ex:<body onscroll="bodyScroll();"></body> - Declare a JavaScript variable to -1. (In this tutorial scrollTimer)
-
Implement the
bodyScroll()function
function bodyScroll() {
$('#maincontent').css('background-color','lightGrey');
if (scrollTimer != -1)
clearTimeout(scrollTimer);
scrollTimer = window.setTimeout("scrollFinished()", 300);
} -
Implement the
scrollFinished()method.
function scrollFinished() {
$('#maincontent').css("background","white");
}
This post shows hot do this using JQuery scroll() method.
Please add a comment if this was useful to you or you have something to add
No comments:
Post a Comment