onScreen

I made a simple jQuery plugin called onScreen that can detect whether an element is currently visible on-screen. It adds a custom :onScreen selector to jQuery allowing you to do something like this: $("span:onScreen").

The example is a little contrived:

$(function() {                          // On document load
  $(window).scroll(function() {         // when the page is scrolled
    $("h2")                             // get all <h2>s
      .css("background-color", "")      // reset their background colours
      .filter(":onScreen")              // get only <h2>s on screen
        .css("background-color", "red") // give them a red background
  })
})

I’ll explain exactly how I’m using it another time, in the meantime it’s on GitHub for your perusal.