Ben Alman » jQuery Misc Plugins » Examples

Your generous donation allows me to continue developing and updating my code!

jQuery viewportOffset is like the built-in jQuery .offset() method, but calculates left and top from the element’s position relative to the viewport, not the document.

Scroll down to see the demo in action.

The code

$(function(){
  
  // Test "below-the-fold-ness" on window scroll.
  $(window).scroll(function(){
    
    var elem = $('#sentry');
    
    if ( elem.viewportOffset().top > $(window).height() ) {
      // elem is below the fold.
      $('#status span').css( 'color', '#f00' ).text( 'below' );
    } else {
      // elem is above the fold.
      $('#status span').css( 'color', '#0a0' ).text( 'above' );
    }
  });
  
});

The example

This space intentionally left blank. Scroll down!

Sentry status: sentry the fold

sentry

Ben Alman » jQuery Misc Plugins » Examples » viewportOffset

Is an element "above the fold?"

Project Home, Source

The code

The example