根据滚动更改导航栏上的RGBA背景颜色

Question

我在页面顶部有一个bootsrap固定导航栏。 我想根据页面上的滚动位置将背景颜色的不透明度从0逐渐逐渐提高到0.75。 如何使用jquery做到这一点？

滚动之前

.navbar-inverse {
  background: rgba(53,145,204,0);
}

滚动后〜500px或更好，但当前窗口大小的100％

.navbar-inverse {
  background: rgba(53,145,204,0.75);
}

Answer 1

您想实现这样的目标吗？

 $(document).scroll(function() { var dHeight = $(this).height()-$(window).height(); if (dHeight >= $(this).scrollTop()) { $('nav').css('background', 'rgba(53,145,204,' + $(this).scrollTop() / dHeight + ')'); } }); 

 body { margin: 0; } nav { background: rgba(53, 145, 204, 0); position: fixed; top: 0; width: 100%; } nav ul > li { display: inline-block; } .container { height: 1000px; margin-top: 100px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <nav> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </nav> <div class="container"> <div> Scroll me... </div> </div> 

Answer 2

用来达到类似的效果：

    $(function() {
        //caches a jQuery object containing the header element
        var header = $(".fade-transparent");
        $(window).scroll(function() {
            var scroll = $(window).scrollTop();

            if (scroll >= 200) {
                header.removeClass('fade-transparent').addClass("fade-background");
            } else {
                header.removeClass("fade-background").addClass('fade-transparent');
            }
        });
    });


.fade-background {

      background-color: #3591cc;
      background-color: rgba(53,145,204,0.75);

      -webkit-transition: background-color 3s;
    transition: background-color 3s;

}

.fade-transparent {

      background-color: transparent;

      -webkit-transition: background-color 1s;
    transition: background-color 1s;

}