Timeout on an if else if else statement?

Question

So, in this project I have a sprite (cat) that has three possible classes depending on lastScroll, .stillkitty when at rest, .walkingkitty when scrolling down, and .backkitty when scrolling back up. They work fine, but I also want a timeout to reset it to the initial class (.stillkitty) after a specified period of time. The current coded timeout seems to work only for the first downward scroll, how can I get it to work for anytime there isn't a scroll within - let's say 3000ms? Here's the site http://dtc-wsuv.org/jcohen/inprogress/

jQuery

// Kitty Sprite
            var lastScroll = 0;

            $(document).ready(function($) {
                $('#kittysprite').addClass('stillkitty');

                $(window).scroll(function(){
                    var scroll = $(window).scrollTop();
                    if (scroll > lastScroll) {
                        $('#kittysprite').removeClass().addClass('walkingkitty');
                    } 
                    else if (scroll < lastScroll) {
                        $('#kittysprite').removeClass('walkingkitty').addClass('backkitty');
                    }
                    else  {
                        setTimeout(function() {
                            $('#kittysprite').removeClass().addClass('stillkitty');
                        }, 3000);
                    }

                    lastScroll = scroll;
                });
            });

HTML

<div id='kittysprite' class='stillkitty'></div>

CSS

.stillkitty {
    position: fixed;
    bottom: 5%;
    left: 30%;
    animation: stillkitty 4s steps(15) infinite;
    background: url(images/stillkitty.png) 0 0 no-repeat; 
    height: 75px;
    width: 150px;
    }

@keyframes stillkitty {  
    0% {background-position: 0 0; } 
    100% {background-position: 0 -1125px; }
    }


.walkingkitty {
    position: fixed;
    bottom: 5%;
    left: 30%;
    animation: walkingkitty 1s steps(5) infinite;
    background: url(images/walkingkitty.png) 0 0 no-repeat; 
    height: 75px;
    width: 150px;
    }

@keyframes walkingkitty {  
    0% {background-position: 0 0; } 
    100% {background-position: 0 -375px; }
    }

.backkitty {
    position: fixed;
    bottom: 5%;
    left: 30%;
    animation: backkitty 1s steps(4) infinite;
    background: url(images/backkitty.png) 0 0 no-repeat; 
    height: 75px;
    width: 150px;
    }

@keyframes backkitty {  
    0% {background-position: 0 0; } 
    100% {background-position: 0 -300px; }
    }

score 1 · Accepted Answer · edited May 23 '17 at 12:20

setTimeOut is executed only once. Try using setInterval.

Here is a simple fiddle - Fiddle

There is one more thing: You need to check if user is not scrolling then run your code:

var lastScroll = 0;
var isScrolling = false;

$(document).ready(function($) {
    $('#kittysprite').addClass('stillkitty');

    //run every 3000ms and see if user is not scrolling then reset
    setInterval(function() {
        if(!isScrolling){
            $('#kittysprite').removeClass().addClass('stillkitty');
        }
    }, 3000);

    $(window).scroll(function(){
        //User is scrolling
        isScrolling = true;

        //Reset the timeout
        clearTimeout($.data(this, 'scrollTimer'));
        $.data(this, 'scrollTimer', setTimeout(function() {
            // User is not scrolling
            isScrolling = false;
        }, 250));

        var scroll = $(window).scrollTop();
        if (scroll > lastScroll) {
            $('#kittysprite').removeClass().addClass('walkingkitty');
        } 
        else if (scroll < lastScroll) {
            $('#kittysprite').removeClass('walkingkitty').addClass('backkitty');
        }

        lastScroll = scroll;
    });
});

References: Not Scrolling

Timeout on an if else if else statement?

1 Answers1