Question

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

因此，我们有四个步骤：

1）导航页面以原始颜色加载时显示

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

看看小提琴：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>

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

1 个答案: