Skip to content

Instantly share code, notes, and snippets.

@byrichardpowell
Created August 29, 2012 21:50
Show Gist options
  • Save byrichardpowell/3519382 to your computer and use it in GitHub Desktop.
Save byrichardpowell/3519382 to your computer and use it in GitHub Desktop.
jquery out of bounds
// Out of bounds
// Checks wether the element has been hidden by the user scrolling its parent
// Returns an object with, if above
// above : true
// crop : 92
// If below
// below : true
// crop 182
// Where crop is the no of pixels is it cropped by
// Object will be empty if its not out of bounds
(function($) {
$.fn.hiddenByScroll = function( $wrapper ) {
var $el = $(this);
var $elOffset = $el.offset();
var $wrapperOffset = $wrapper.offset();
var result = {};
// Bottom Positions
$elOffset.bottom = $elOffset.top + $el.height();
$wrapperOffset.bottom = $wrapperOffset.top + $wrapper.height();
if ( $elOffset.top < $wrapperOffset.top ) {
result.above = true;
result.crop = $wrapperOffset.top - $elOffset.top
} else if ( $elOffset.bottom > $wrapperOffset.bottom ) {
result.below = false;
result.crop = $elOffset.bottom - $wrapperOffset.bottom;
}
return result;
};
}($) );
@abilogic
Copy link

Thank you!
This code is very useful for me.
But this code has one mistake, need result.below = false change to result.below = true )

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment