滚动时导航栏淡入淡出

Question

嗨，我正在搜索如何让我的导航栏在向下滚动时淡入，在向上滚动时淡出，发现不错的主题对我有很大帮助 Fading bootstrap navbar on scrolldown, while changing text color

还有http://jsfiddle.net/f5UTL/

问题是它在滚动时不会淡入或淡出它只是出现和消失没有动态动画它甚至在移动我的页面而这个过程如果有人告诉我我的错误在哪里，我们将不胜感激

< script >
    $(function () {
        var header = $('.opaque');
        $(window).scroll(function () {

            var scroll = $(window).scrollTop();

            if (scroll >= 300) {
                header.removeClass('opaque').addClass('navbar-fixed-top').fadeIn();
            } else {
                header.removeClass('navbar-fixed-top').fadeOut().addClass('opaque');
            }
        });
    });
< /script>

  

.navbar-fixed-top {
    
    background-color: rgba(128,128,128,1);
    transition: background-color all 2s;
    -webkit-transition: background-color all 2s;
    -moz-transition: background-color all 2s;
    -o-transition: background-color all 2s;
  }
.navbar-fixed-top .opaque { 
    background-color: rgba(128,128,128,0);
    transition: background-color all 2s ;
    -webkit-transition: background-color all 2s ;
    -moz-transition: background-color all 2s ;
    -o-transition: background-color all 2s ;
  }

Answer 1

这里是您想要实现的简化版本。

$(function() {
    //caches a jQuery object containing the header element
    var header = $('#nav');
    $(window).scroll(function() {
       var scroll = $(window).scrollTop();
       if (scroll >= header.height()) {
         header.fadeOut();
       } else {
        header.fadeIn();
      }
    });
});

希望它能帮助您继续。

更新fiddle。