Searching for a Javascript expert to assist in solving a particular issue. I have a simple function that I need help with. The goal is to add a bounceDown class when scrolling down by 1px, have it run for 5 seconds, and then remove the class for future use of the function.
Additionally, when scrolling up from the current position, I want a bounceUp effect to take place. The challenge is that the bounceUp effect seems to only work once you have scrolled past the original scroll position. Furthermore, if the previous function is still in its 5-second transition period, it creates a jumpy effect by trying to run two classes simultaneously, so there needs to be a delay applied.
If anyone is able to lend a hand, it would be greatly appreciated.
<script>
(function($){
$.fn.extend({
addTemporaryClass: function(className, duration) {
var elements = this;
setTimeout(function() {
elements.removeClass(className);
}, duration);
return this.each(function() {
$(this).addClass(className);
});
}
});
})(jQuery);
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 1) {
$(".spanner").addTemporaryClass("BounceDown", 5000);
}
else if (scroll <= 1) {
$(".spanner").addTemporaryClass("BounceUp", 5000);
}
});
</script>