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

Question

我想在向上滚动时更改导航颜色，回到顶部的默认颜色。

所以，我们有四个步骤:

1) Nav 在加载页面时以其原始颜色显示

2) 向下滚动时导航隐藏

3) Nav 在向上滚动时改变了它的颜色，但是

4) 到达顶部时变成原来的颜色

我有这个初始代码(第 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

看看 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>