Make navbar return into focus if user stops scrolling for more than 1s

Question

Currently my code snippet hides the navbar as the user scrolls down and brings it back into view as the user scrolls up.

How would I also bring it back into view once the user stops scrolling down (or pauses momentarily)?

Code:

var mywindow = $(window);
var mypos = mywindow.scrollTop();
var up = false;
var newscroll;
mywindow.scroll(function () {
    newscroll = mywindow.scrollTop();
    if (newscroll > mypos && !up) {
        $('.header').stop().slideToggle();
        up = !up;
        console.log(up);
    } else if(newscroll < mypos && up) {
        $('.header').stop().slideToggle();
        up = !up;
    }
    mypos = newscroll;
});

Jsfiddle:

http://jsfiddle.net/GM46N/2/

score 1 · Accepted Answer · answered Oct 23 '14 at 22:24

Perhaps you'd want to use a setTimeout at the end of your scroll event and clear it as soon as the event is fired again, as in:

var mywindow = $(window);
var mypos = mywindow.scrollTop(); 
var up = false;
var newscroll;
mywindow.scroll(function () {
newscroll = mywindow.scrollTop();
clearTimeout(a);
if (newscroll > mypos && !up) {
    $('.header').stop().slideToggle();
    up = !up;
    console.log(up);
} else if(newscroll < mypos && up) {
    $('.header').stop().slideToggle();
    up = !up;
}
var a = setTimeout(function(){
if (up) {
    $('.header').stop().slideToggle();
    up = !up;
} 
},1400);
mypos = newscroll;
});

I hope this helped you!

score 1 · Answer 2 · edited May 23 '17 at 10:33

1

You need a timeout.

Since it looks like your using jQuery here is a resource with a bunch of examples for timeout solutions regarding scrolling event: jquery-event-when-user-stops-scrolling

edited May 23 '17 at 10:33

Community

1
1

answered Oct 23 '14 at 22:29

Justin

11
1

Make navbar return into focus if user stops scrolling for more than 1s

2 Answers2