Question

嗨我正在搜索有关如何在向下滚动时使我的导航栏淡入淡出和fadeOut同时向上滚动并找到好主题帮助了我很多 Fading bootstrap navbar on scrolldown, while changing text color

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

< 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。

navbar fadeIn＆amp; fadeOut在滚动

1 个答案: