Why does the "show" class get toggled on second scroll down?

JavaScript
1 
function smartStickyNav() {
    var lastScrollTop = 0;
    window.addEventListener("scroll", function(){
      var st = window.pageYOffset || document.documentElement.scrollTop;
      if($(window).scrollTop() > $(".fixed-content").height()) {
        $("#fsHeader .nav-main").addClass("fixed");
        if (st > lastScrollTop){
          console.log("scrolldown");
          $("#fsHeader .nav-main").removeClass("show");
        }
        else {
          $("#fsHeader .nav-main").addClass("show");
          console.log("scrollup");
        }
        lastScrollTop = st;
      }
      else {
        $("#fsHeader .nav-main").removeClass("fixed").removeClass("show");
      }
    }, false);
  }

tai pei . red esi gn . fin al si te . com
Scroll down and you’ll notice the header disappear, and on scroll up it’ll show back in view. Now scroll back to the top of the page and do it again. You’ll see it do a little jump before it goes out of view. Looking at the dev tools, it gets the “show” class real fast before getting removed. The thing is, the console log accompanying the “show” isn’t being fired. What sort of glitch is this? Looking for consistent behavior.

2

Got it. Moved the lastScrollTop = st outside of all the if/else.

Not sure why I have to post here to figure stuff out.

2 Likes
3

Just writing it down helps :slight_smile:

2 Likes
4

Trying to explain it to someone else means you are looking at it differently than when you were trying to solve it yourself.

2 Likes
5

That’s a good point.

When I posted, I tried running through the function like an outsider who doesn’t know it, and go through the process. I realized in the if statement that if a user scrolled back up, the lastScrollTop never would get reset.

Perhaps I should type up a thread from here on out and just not hit “post” :stuck_out_tongue: .

1 Like
6

[quote=“RyanReese, post:5, topic:227534, full:true”]Perhaps I should type up a thread from here on out and just not hit “post” :stuck_out_tongue: .
[/quote]

Have you heard of rubber duck debugging before? When you’re faced with a problem, you explain it to rubber ducky helping him to understand the problem. It’s remarkably effective and the rubber duck serves a dual purpose other than for dive bombing in the bath :smile:

5 Likes
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.