导航条淡出&滚动时淡出

navbar fadeIn & fadeOut at scrolling

本文关键字：淡出 滚动 导航      更新时间：2023-09-26

嗨，我正在做一个关于如何使我的导航栏在向下滚动和向上滚动时淡出的搜索，发现很好的主题帮助了我很多下滚动时引导导航条褪色，同时改变文本颜色

亦作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 ;
  }

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

$(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();
      }
    });
});

希望它能帮助你继续。

更新小提琴。

相关文章：