Created
March 23, 2017 03:49
-
-
Save jimimaher/ff58945c068cb4f8da4cc7acbda46ec8 to your computer and use it in GitHub Desktop.
Sniff for user scroll position, fire things once section enters screen
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var HomeController = (function(){ | |
var | |
sections, | |
sectionsArray, | |
scrollTicking = false, | |
scrollAnimationClass = "pre_animate", | |
latestKnownScrollY | |
; | |
var sectionScroll; | |
var init = function(){ | |
sections = document.querySelectorAll('.refresh-section'); | |
sectionsArray = Array.prototype.slice.call(sections); | |
sectionScroll = sectionsArray.map(function(){ | |
this.fired = false; | |
return { | |
fired: false | |
} | |
}); | |
//push loaded class to video once it "can play through" | |
var mainVid; | |
if(window.innerWidth >= 700){ | |
$('#mobileVid').remove(); | |
mainVid = document.getElementById('desktopVid'); | |
} else{ | |
$('#desktopVid').remove(); | |
mainVid = document.getElementById('mobileVid'); | |
} | |
mainVid.addEventListener('loadeddata', videoReady); | |
mainVid.load(); | |
function videoReady(){ | |
mainVid.classList.add('loaded'); | |
Listeners(); | |
mainVid.removeEventListener('loadeddata', videoReady); | |
} | |
HomeModal.deeplink(); | |
IEfix(); | |
} | |
function IEfix(){ | |
if(navigator.userAgent.indexOf('Trident') > -1 || navigator.userAgent.indexOf('Edge') > -1){ | |
$('.blob').remove(); | |
} | |
} | |
var Listeners = function(){ | |
TagListener(); | |
scrollListener(); | |
window.addEventListener("scroll", scrollListener); | |
if (window.innerWidth < 700){ | |
window.addEventListener("scroll", ctaScrollListener); | |
} | |
}; | |
var ctaScrollListener = function(){ | |
if (window.pageYOffset > (sections[1].offsetTop - window.innerHeight/2)){ | |
$('#mobile-fixed-ctas').addClass('in_view'); | |
} else { | |
$('#mobile-fixed-ctas').removeClass('in_view'); | |
} | |
} | |
function scrollListener() { | |
latestKnownScrollY = window.pageYOffset; | |
requestScrollTick(); | |
} | |
function requestScrollTick() { | |
if(!scrollTicking) { | |
requestAnimationFrame(scrollAnimateHandler); | |
} | |
scrollTicking = true; | |
} | |
var currentScrollY; | |
var scrollTimer; | |
var scrollAnimateHandler = function(){ | |
scrollTicking = false; | |
currentScrollY = latestKnownScrollY; | |
for ( var s = 0; s < sections.length; s++){ | |
if (currentScrollY > sections[s].offsetTop - window.innerHeight/2 && sectionScroll[s].fired == false){ | |
sectionScroll[s].fired = true; | |
sections[s].classList.remove(scrollAnimationClass); | |
var dataFunction = sections[s].getAttribute('data-function'); | |
var tagSection = sections[s].getAttribute('id').replace('_',''); | |
if (dataFunction !== undefined){ | |
window[dataFunction](); | |
} | |
} | |
if (sections[s].getBoundingClientRect().top + sections[s].getBoundingClientRect().height < window.innerHeight/2 | |
|| sections[s].getBoundingClientRect().top > window.innerHeight/2){ | |
sections[s].classList.remove('t_pv'); | |
} else { | |
if( $(sections[s]).hasClass('t_pv') == false ) { | |
var tagSection = sections[s].getAttribute('id').replace('_',''); | |
viewHandler(tagSection); | |
sections[s].classList.add('t_pv'); | |
// setTimeout(function(){ | |
// whichVidsPaused(); | |
// }, 50); | |
} | |
} | |
if (sections[s].getBoundingClientRect().top + sections[s].getBoundingClientRect().height < 0 | |
|| sections[s].getBoundingClientRect().top > window.innerHeight){ | |
sections[s].classList.add('o_s'); //o_s = off screen | |
if(sectionsArray[s].querySelector('video')){ | |
sectionsArray[s].querySelector('video').pause(); | |
} | |
} else { | |
if ( $(sections[s]).hasClass('o_s') ) { | |
sections[s].classList.remove('o_s'); | |
var tagSection = sections[s].getAttribute('id').replace('_',''); | |
if(sectionsArray[s].querySelector('video')){ | |
sectionsArray[s].querySelector('video').play(); | |
} | |
} | |
} | |
} | |
}; | |
return { | |
init: init, | |
scrollAnimateHandler: scrollAnimateHandler, | |
ctaScrollListener: ctaScrollListener | |
} | |
})(); | |
// output which video is paused, which aren't | |
function whichVidsPaused(){ | |
vids = document.querySelectorAll('video'); | |
for(v = 0; v < vids.length; v++){ | |
console.log(vids[v].getAttribute('id') + ' is paused: ' + vids[v].paused); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment