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

Question

我有一个垂直导航栏，我想在用户滚动到标题下方时显示并慢慢淡入。同样，如果用户滚动到标题上，我希望导航栏消失并慢慢淡出。这是我当前的功能:

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

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

Answer 1

将其更改为使用 css transition，还为滚动事件添加了轻微的反跳。从@Adriani6 的 fiddle 中取出标记，: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>