Question

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

但是，我希望它出现时有平滑的淡入和淡出效果（当你再次向上滚动时，消失）。

我怎么能实现这一目标？ 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;
}

Answer 2

正如@realseanp所说，CSS转换在这里可以很好地工作。但是，您可能希望将过渡应用于导航的背景颜色而不是不透明度。

#nav {
  transition: background-color 0.3s ease;
  background-color: rgba(255,255,255,0);
}
#nav.navbar-fixed {
  background-color: rgba(255,255,255,1);
}

Here's一个小提琴演示。在1秒超时后，课程＆＃34;固定＆＃34;应用于导航。

如何淡入/淡出导航栏，滚动后得到修复？

2 个答案: