This is throwing me for a loop..
The basic idea is we're using $(window).scroll() and as you scroll down the page, when an element is in view by using offset() with scrollTop "do something" then when you hit the next element down the page "do something more".
However, because the scroll event (probably the wrong term) fires every single time in the conditional statement because technically the statement is true every scroll, I need it to only fire once, but then be able to 're-fire again' one time when the next conditional happens.
$(window).scroll(function(){
let windowTop = $(window).scrollTop()
if( windowTop > $('.element').offset().top && windowTop < $('.element2').offset().top ) {
doSomething(); // want this to only fire once
} else if( windowTop > $('.element2').offset().top ) {
doSomething(); // want this to only fire once
}
});
I had a theory about possibly setting a variable to true so it only fire's doSomething() once, but then when it's inside the 2nd conditional statement I can't wrap my head around undoing / resetting it.
let fired = false;
$(window).scroll(function(){
let windowTop = $(window).scrollTop()
if( windowTop > $('.element').offset().top && windowTop < $('.element2').offset().top ) {
if(!fired){
doSomething();
fired = true;
}
} else if( windowTop > $('.element2').offset().top ) {
// need to somehow set fired to false again so it triggers once then sets back to true
if(!fired){
doSomething();
fired = true;
}
}
});
Hope I somehow made sense!
Consider the following.
var fire = {
"element1": true,
"element2": true
};
$(window).scroll(function(event){
var windowTop = $(window).scrollTop();
console.log("Window Scroll Top: " + windowTop);
if( fire.element1 && (windowTop > $('.element').offset().top && windowTop < $('.element2').offset().top) ) {
console.log("Do Something!", $('.element').offset().top);
fire.element1 = false;
doSomething();
} else if( fire.element2 && (windowTop > $('.element2').offset().top) ) {
console.log("Do Something!", $('.element2').offset().top);
fire.element2 = false;
doSomething();
}
});
The logic here is we check if we should fire the event for each element. In this way we have a more complex IF condition. Fire for that element must be true and the Scroll position must have gone down far enough.
If the Top of the element is 100, this condition should only be true at one time and one time only, when windowTop is a value of 101 or higher. Now if you want it to trigger when the element is fully in view, you need the Top plus the Height. If it's 40px tall, then it would be 140 (Top + Height).