So, I bind a function to window scroll, but it runs repeatedly when user scrolls.
But I want it to run once when user scrolls, and when the scroll ends, then when user scrolls again I want it to run again.
Right now my code looks like this:
function whenScroll() {
var zSection = $(".zSection").toArray();
if (window.calc == -1) {
$(zSection[window.zSecPos]).stop().slideToggle();
} else {
$(zSection[window.zSecPos-1]).stop().slideToggle();
}
clearTimeout($.data(this, "scrollTimer"));
$.data(this, "scrollTimer", setTimeout(function() {
if (window.calc == -1) {
window.zSecPos = window.zSecPos + 1;
} else {
window.zSecPos = window.zSecPos - 1;
}
}, 250));
}
window.zSecPos = 0;
$(window).scroll(function() {
whenScroll();
});
By the way, window.calc indicates the scroll direction, which I determine in another js file.
I ended up fixing it myself. Sorry.
The thing is I have seperate all page long sections, which I want to scroll through between them.
So, my final code:
function whenScroll() {
var zSection = $(".zSection").toArray();
clearTimeout($.data(this, "scrollTimer"));
$.data(this, "scrollTimer", setTimeout(function() {
if (window.calc == -1) {
if ($(zSection[window.zSecPos+1]).length) {
$(zSection[window.zSecPos]).stop().animate({
top: "-100vh"
}, 300);
window.zSecPos = window.zSecPos + 1;
}
} else {
if ($(zSection[window.zSecPos-1]).length) {
$(zSection[window.zSecPos-1]).stop().animate({
top: "0"
}, 300);
window.zSecPos = window.zSecPos - 1;
}
}
console.log(window.zSecPos);
}, 300));
}
$(document).ready(function() {
setTimeout(function() {
$(".zSection").removeClass("displayNone");
}, 1000);
});
window.zSecPos = 0;
$(window).scroll(function() {
whenScroll();
});