javascript - 如何淡入/淡出滚动后固定的导航栏？

Question

到目前为止，当您登陆页面时，我有一个带有透明背景的导航栏。滚动一定阈值后，它得到类navbar-fixed，使导航栏固定并改变外观。

但是，我希望它在出现时具有平滑的淡入和淡出效果(当您再次向上滚动时，消失)。

我怎样才能做到这一点？ Jquery fadeIn 和 fadeOut 不起作用，因为它实际上完全隐藏了带有 fadeOut 的导航栏。

<div id="nav" class="navbar-trans">
</div>

<script type="text/javascript">
  $(document).ready(function() {

  $(window).scroll(function () {
      //if you hard code, then use console
      //.log to determine when you want the 
      //nav bar to stick.  
      console.log($(window).scrollTop())
    if ($(window).scrollTop() > 280) {
      $('#nav').removeClass('navbar-trans').addClass('navbar-fixed');
    }
    if ($(window).scrollTop() < 281) {
      $('#nav').removeClass('navbar-fixed').addClass('navbar-trans');
    }
  });
});
</script>

Answer 1

使用CSS过渡

#nav {
    transition: opacity 0.25s;
}

.navbar-fixed {
    opacity: 0.75
}

.navbar-trans {
    opacity: 1;
}