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?
you need take window height account.
if ($(window).scrolltop() + $(window).height() >= videoobj.top) {
Comments
Post a Comment