WebAppers

/ best free open source web resources /

Shopify

Detect Page Scrolling with MooTools ScrollSpy

Posted · Category: Capture, License Free

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.

Requirements: MooTools Framework
Demo 1: http://davidwalsh.name/dw-content/scroll-spy.php?
Demo 2: http://davidwalsh.name/dw-content/scroll-spy.php?page=1
Demo 3: http://davidwalsh.name/dw-content/scroll-spy.php?page=2
Demo 4: http://davidwalsh.name/dw-content/scroll-spy.php?page=3
License: License Free

4 Comments
  • http://arafatbd.net Arafat Rahman

    Fantastic, thanks for the post.

  • http://chepelle.altervista.org/wordpress/ Carlo

    Che figata… it’t fantastic

  • http://www.foxyturkey.com Yigit Ozdamar

    Awsome! Thanx dude!

  • krull

    Anyone know where i can find the same for jquery ?

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons