javascript - Detecting a DIV that is mostly in the viewport/center as you scroll -
trying know when element visible in viewport , in center. i'd have other divs fade off keeping more dominant div @ full opacity scroll.
i found this: http://patik.com/code/within-viewport/ it's pixel , doesn't have logic require work in image below.
you need method tested whether element within bounds of page. there plugins such remy sharp's element in-view event plugin or this digital fusion need test if element in view , add class it.
all relatively simple (although confess have not tested x-browser ymmv):
function testinview($el){ var wtop = $(window).scrolltop(); var wbot = wtop + $(window).height(); var etop = $el.offset().top; var ebot = etop + $el.height(); return ((ebot <= wbot) && (etop >= wtop)); } function setinview(){ $("div").each(function(){//testing every div (you might want more specific in implementation) var $zis = $(this); $zis.removeclass("inview"); if(testinview($zis)){ $zis.addclass("inview"); } }); } $(document).scroll(function(){ setinview(); }); $(document).resize(function(){ setinview(); }); $(document).ready(function(){ setinview(); });
Comments
Post a Comment