JQuery flashing div? help using .promise()

Question

I'm trying to create a fixed navbar that fades while the user is scrolling and and becomes opaque when the user isn't, but I'm not sure how to trigger the fadeTo command when they have stopped scrolling. I've played around and searched for .promise() but i can't figure out the exact usage. I'm new to JS/JQuery and I am in the midst of a school project.

JQuery:

$(window).scroll(function() {
    $("#top").fadeTo(300, 0.5);
    $("#top").fadeTo(300, 1);
});

#top is the navbar.

Any help is appreciated, and try to explain your answers as it helps me learn.

Thanks, Lachlan.

http://stackoverflow.com/questions/9144560/jquery-scroll-detect-when-user-stops-scrolling — thatOneGuy, May 23 '16 at 13:37

score 2 · Accepted Answer · answered May 23 '16 at 14:24

When mouse scrolled, create timer and if after spending time page didn't scroll, show target element.

var timer;
$(window).scroll(function(){
    clearTimeout(timer);
    timer = setTimeout(function(){
        $("#nav").fadeIn("fast");
    }, 500);
    $("#nav").fadeOut("fast");   
});

body {
    height: 1000px;
    position: relative;
}

#nav {
    width: 100%;
    height: 50px;
    position: fixed;
    top: 0px;
    background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav"></div>

JQuery flashing div? help using .promise()

1 Answers1