向上滚动时自动显示/隐藏导航更改颜色

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>