Javascript issue with if statements

Question

ive wrote a simple script that isnt working as intentioned:

var prevscroll = 0;
$(document).scroll(function(){

    var currscroll = $(document).scrollTop();
    if(currscroll > prevscroll){
        $("header").toggle();
        prevscroll = currscroll;
    }
    if(currscroll < prevscroll){
        $("header").toggle();
        prevscroll = currscroll;
    }
});

When the page is scrolled down, its meant to hide the header and only show it if its scrolled up however whats happening is as i scroll down its flicking on and off. :|

I think I may of just spotted a silly error! ofcourse its going to keep flickering since prev scroll keeps increasing.

every time that condition returns true you are toggling the appearance causing it to flash. You need to specify either hide() or show() depending on if you are scrolling up or down. — Goose
– Goose, Commented Jan 20, 2014 at 23:17

jfriend00 · Accepted Answer · 2014-01-20 23:17:27Z

2

You can't use toggle() the way you are because the scroll event is called many, many times so if it's called more than once with the same value for your if statement, then it will flicker on, then off, then on, then off each time you call .toggle(). You need to explicitly hide or show when your condition is met.

I don't quite follow exactly what you're trying to do with prevscroll, but perhaps this is what you want:

var prevscroll = 0;
$(document).scroll(function(){

    var currscroll = $(document).scrollTop();
    if(currscroll > prevscroll){
        $("header").hide();
        prevscroll = currscroll;
    }
    if(currscroll < prevscroll){
        $("header").show();
        prevscroll = currscroll;
    }
});

This will hide the header anytime you are scrolling down further and show the header as soon as you start to scroll up.

answered Jan 20, 2014 at 23:17

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2979139 Over a year ago

Doh, I kind of caught on after I posted! Thanks for answering

user2979139 Over a year ago

Im using prevscroll to test which direction is being scrolled to hide nav bar on mobiles when scrolling down, but then showing when scrolling up instead of having a static bar right at the top. (if that made sense)

Collectives™ on Stack Overflow

Javascript issue with if statements

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related