javascript - How to check if the user scrolled to 30% of an element, from the top or the bottom -


as specified in title, i'm listening scroll event in order fire function when 30% of video shows in window - regardless whether user scrolls or down.

what have this:

// on dom ready, set top , bottom offset of video, // +/- 30% of video height  var $video = $('#js-b2b-video'); var videoheight = $video.outerheight(); var videoheight30 = parseint(videoheight/3, 10); // approx. 30% of video height var videoobj = {}  videoobj.top = $video.offset().top + videoheight30; // approx. 30% top of video videoobj.bottom = videoobj.top + videoheight - videoheight30; // approx. 30% bottom of video 

then, scroll event:

$(window).on('scroll', function() {     if ($(window).scrolltop() >= videoobj.top) {         alert('30% top of video reached');     } }); 

however, fires late, when video visible. need fire function when 30% of top or bottom of video visible.

how do properly?

fiddle

you need take window height account.

if ($(window).scrolltop() + $(window).height() >= videoobj.top) { 

Comments

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

python Tkinter Capturing keyboard events save as one single string -

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -