diff --git a/jquery.appear.js b/jquery.appear.js index ff0b764..e88076f 100644 --- a/jquery.appear.js +++ b/jquery.appear.js @@ -13,13 +13,15 @@ var check_binded = false; var check_lock = false; + var $window = $(window); var defaults = { interval: 250, - force_process: false + force_process: false, + scrolling_parent: $window } - var $window = $(window); var $prior_appeared; + var scrolling_parent; function process() { check_lock = false; @@ -45,16 +47,15 @@ return false; } - var window_left = $window.scrollLeft(); - var window_top = $window.scrollTop(); var offset = $element.offset(); - var left = offset.left; - var top = offset.top; + // calculate pos of element relative to the visible part of the scrolling_parent + var left = offset.left - scrolling_parent.offset().left; + var top = offset.top - scrolling_parent.offset().top; - if (top + $element.height() >= window_top && - top - ($element.data('appear-top-offset') || 0) <= window_top + $window.height() && - left + $element.width() >= window_left && - left - ($element.data('appear-left-offset') || 0) <= window_left + $window.width()) { + if ((top + $element.height() >= 0) && + (top - ($element.data('appear-top-offset') || 0) <= scrolling_parent.height()) && + (left + $element.width() >= 0) && + (left - ($element.data('appear-left-offset') || 0) <= scrolling_parent.width())) { return true; } else { return false; @@ -76,7 +77,12 @@ setTimeout(process, opts.interval); }; - $(window).scroll(on_check).resize(on_check); + scrolling_parent = opts.scrolling_parent; + scrolling_parent.scroll(on_check); + // resize event is only triggered for $window so no point setting it on scrolling_parent + // if scrolling_parent is resizeable you should make sure your resizing code calls .resize() + $window.resize(on_check); + check_binded = true; }