JQuery_ Novice to Ninja - Earle Castledine [33]
To capture the scroll event, we attach an event handler to an element that has scroll bars—most often the window element. The window itself is a JavaScript object, so all we need to do is wrap it in our jQuery function to select it.
Of course, to see the scroll event in action, we have to set up an area with scroll bars! We have a few ideas for scrolling effects that we’d like to pitch to the client, but in the interests of learning how the scroll event works, let’s just fake a scrolling environment by setting overflow: scroll; on one of the divs in our page:
chapter_03/12_scroll_event/scroll.css (excerpt)
#news {
height: 100px;
width: 300px;
overflow: scroll;
}
This will turn our news section into a smaller scrolling pane inside the page. Now let’s capture the scroll event and add some arbitrary text to the page every time the scroll event fires:
chapter_03/12_scroll_event/script.js (excerpt)
$('#news').scroll(function() {
$('#header')
.append('You scrolled!');
});
Now whenever you scroll the news section, the text “You Scrolled!” will appear on a red background at the top of the page. Very annoying, but you get the picture. Try scrolling in different ways: dragging the scroll bar, using the mouse wheel, and clicking inside the scrollable zone to use the arrow keys. In all the above cases, the scroll event will fire.
Floating Navigation
We now know when a user scrolls, so how can we make use of this information to improve our site? Well, one fairly common example of a page reacting to users’ scrolling is a floating navigation pane. This is when the main navigation element is always present at the top of the visible part of the screen, regardless of the scroll position; it’s as if the navigation menu follows users as they scroll down the page. This is easy to implement using the scroll event: we simply need to find out where we are on the page, and then move the navigation to that point.
Our first task is to set up our CSS to prepare for the animated navigation. We’ll add a position: relative; declaration to our navigation element so that we can easily move it up and down the page by adjusting its top property. For the purpose of this exercise, we’ve applied a very large height property to the content in order to force it to have a scroll bar (unless, of course, you have a huge monitor!):
chapter_03/13_floating_nav_1/scroll.css (excerpt)
#navigation {
position: relative;
}
#content {
height: 2000px;
}
Now we can take a stab at our floating pane. At first glance it seems that nothing could be simpler—just respond to the scroll event of the main window by updating the top position of the navigation block:
chapter_03/13_floating_nav_1/script.js (excerpt)
$(window).scroll(function() {
$('#navigation').css('top', $(document).scrollTop());
});
Test this out in your browser and you’ll see that we’ve achieved our goal: as you scroll down the page, the navigation box plods along with you. How does it know where the top is? We asked for the top of the screen by using the scrollTop action. scrollTop returns the top offset of the matched element—in our example we asked for the entire document’s top position: $(document).scrollTop(). This will always be the very top of the screen.
It works, sure, but it’s very jumpy, which makes it a little unattractive. The reason for this should be evident if you were paying attention when we first introduced the scroll event: every time the user moves the scroll bar, it fires many scroll events. Each one of those events triggers our code to update the navigation position—so it’s no wonder the motion is jittery.
We saw how to stop animations from queuing up like this in the section called “Animated Navigation” with the stop command. This takes care of the jumpiness, but our effect could still use some refinement.