Auto show/hide nav changing color when scrolling up

Question

I would like to change the nav color when scrolling up, coming back to its default color at the top.

So, we'd have four steps:

1) Nav shows when loading page with its original color

2) Nav hides when scrolling down

3) Nav changes its color while scrolling up, BUT

4) It turns to its original color when reaching top

I have this initial code (steps 1 & 2):

$(function(){
var prevScroll = 0,
curDir = 'down',
prevDir = 'up';

$(window).scroll(function(){
    if($(this).scrollTop() >= prevScroll){
      curDir = 'down';
      if(curDir != prevDir){
      $('nav').stop();
        $('nav').animate({ top: '-100px' }, 300);
      prevDir = curDir;
      }
  } else {
      curDir = 'up';
      if(curDir != prevDir){
      $('nav').stop();
      $('nav').animate({ top: '0px' }, 300);
      prevDir = curDir;
      }
  }
  prevScroll = $(this).scrollTop();
});
})

Answer 1

Take a look at the fiddle: https://jsfiddle.net/grguryrw/

 var prevScrollTop = 0; $(document).scroll(function(){ var currentScrollTop = $(document).scrollTop(); if(currentScrollTop < 1){ $('header').removeClass('another-color'); $('header').addClass('original-color'); } else if(currentScrollTop > prevScrollTop){ $('header').animate({ top: '-55px' }, 300); } else { $('header').removeClass('original-color'); $('header').addClass('another-color'); $('header').animate({ top: '0px' }, 300); } prevScrollTop = currentScrollTop; }); 

 header { height: 55px; width: 100%; position: fixed; } .original-color { background-color: #0078a3; } .another-color { background-color: red; } div { padding-top: 60px; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header class='original-color'> </header> <div> Did the rules change..? The year Chelsea won UCL being 6th in the league they were directly seeded into the Next Years UCL and 4th placed Tottenham did not qualify for UCL or Play Play offsDid the rules change..? The year Chelsea won UCL being 6th in the league they were directly seeded into the Next Years UCL and 4th placed Tottenham did not qualify for UCL or Play Play offsDid the rules change..? The year Chelsea won UCL being 6th in the league they were directly seeded into the Next Years UCL and 4th placed Tottenham did not qualify for UCL or Play Play offsDid the rules change..? The year Chelsea won UCL being 6th in the league they were directly seeded into the Next Years UCL and 4th placed Tottenham did not qualify for UCL or Play Play offsDid the rules change..? The year Chelsea won UCL being 6th in the league they were directly seeded into the Next Years UCL and 4th placed Tottenham did not qualify for UCL or Play Play offsDid the rules change..? The year Chelsea won UCL being 6th in the league they were directly seeded into the Next Years UCL and 4th placed Tottenham did not qualify for UCL or Play Play offsDid the rules change..? The year Chelsea won UCL being 6th in the league they were directly seeded into the Next Years UCL and 4th placed Tottenham did not qualify for UCL or Play Play offsDid the rules change..? The year Chelsea won UCL being 6th in the league they were directly seeded into the Next Years UCL and 4th placed Tottenham did not qualify for UCL or Play Play offsDid the rules change..? The year Chelsea won UCL being 6th in the league they were directly seeded into the Next Years UCL and 4th placed Tottenham did not qualify for UCL or Play Play offsDid the rules change..? The year Chelsea won UCL being 6th in the league they were directly seeded into the Next Years UCL and 4th placed Tottenham did not qualify for UCL or Play Play offsDid the rules change..? The year Chelsea won UCL being 6th in the league they were directly seeded into the Next Years UCL and 4th placed Tottenham did not qualify for UCL or Play Play offsDid the rules change..? The year Chelsea won UCL being 6th in the league they were directly seeded into the Next Years UCL and 4th placed Tottenham did not qualify for UCL or Play Play offsDid the rules change..? The year Chelsea won UCL being 6th in the league they were directly seeded into the Next Years UCL and 4th placed Tottenham did not qualify for UCL or Play Play offsDid the rules change..? The year Chelsea won UCL being 6th in the league they were directly seeded into the Next Years UCL and 4th placed Tottenham did not qualify for UCL or Play Play offs </div>