Posts Tagged ‘scrolling’

Detect Page Scrolling with MooTools ScrollSpy

May 28th, 2009 No comments

MooTools ScrollSpy is a unique but simple MooTools plugin that listens to page scrolling and fires events based on where the user has scrolled to in the page. Now you can fire specific functionality with just a few simple parameters. David has shown us 4 examples of using ScrollSpy.

Example 1: “Top the Top”
When you scroll down a defined number of pixels, you get a “Scroll to Top” link in the lower right hand part of the screen. When you’re back at the top, ScrollSpy is directed to hide the link.

Example 2: “The Show”
When you click the link, the window scrolls to the right. During the scrolling process, ScrollSpy shows and hides content blocks based on where in the scrolling process the window is.

Example 3: “Team Colors”
This displays a different background color depending on where you are in the page.

Example 4: “Position Pointer”
This displays imagery in different positions on the page based upon where the user scrolls.