Question

我有一个我想要显示的垂直导航栏，当用户滚动到标题下方时，我会慢慢淡入。同样，如果用户滚动到标题上，我希望导航栏消失，然后慢慢淡出。这是我目前的职能：

    $(window).scroll(function() {
        var scrollPos = $(window).scrollTop();
        if (scrollPos < 650) {
            $('.navbar').fadeOut(4000);
        } else {
            $('.navbar').fadeIn(4000);
        }
    });

这个问题是当我滚动标题下方（或者特别是650的位置）时，导航栏会快速显示为完全不透明，慢慢消失，然后慢慢淡入。当我滚动到标题时，它只是很快就消失了。如何解决此问题以获得所需的行为？

Answer 1

将其更改为使用css过渡，并为滚动事件添加了轻微的去抖动。来自@Adriani6小提琴的标记：P

(function(){
  var timeout;
  var $window = $(window);
  var $navbar = $('.navbar');
  
  $window.on('scroll', function(e){
    clearTimeout(timeout);
    
    timeout = setTimeout(function(){
      if ($window.scrollTop() < 650) {
        $navbar.removeClass('hide');
      } else {
        $navbar.addClass('hide');
      }
    }, 100);
  });
}());

body{
  height: 12000px;
}
.navbar{
  height: 100px;
  width: 800px;
  background-color: green;
  position: fixed;
  
  transition: opacity 4s;
  opacity: 1;
}

.navbar.hide {
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='navbar'></div>

Answer 2

默认情况下，您应确保隐藏.navbar，并为其提供此CSS

.navbar {
  display: none;
}

然后它应该在没有闪光的情况下到达滚动位置时淡入。

如何根据滚动位置淡入和淡出导航栏

2 个答案: