I'm developing a one page website with Skrollr.js plugin. I need to add multiple audio tracks to specific pixel heights and stop these tracks in multiple breakpoints. How can I do that?
I tried with the script below, but I don't know how to add multiple conditions with other breakpoints, tracks, and pixel height.
var playing = false;
var audioTrack = $('#track1').get(0);
window.onscroll = function() {
var winH = $(window).height();
var scrollPage = $(window).scrollTop();
if(!playing && winH >= 768 && scrollPage > 1000 && scrollPage < 3000){
audioTrack.play();
playing = true;
}else if(scrollPage > 3000 || scrollPage < 1000 || winH < 768 ){
audioTrack.pause();
audioTrack.currentTime = 0;
playing = false;
}
}