基于滚动更改导航栏上的 rgba 背景颜色答案

【问题标题】：Changing rgba background color on navbar based on scroll基于滚动更改导航栏上的 rgba 背景颜色
【发布时间】：2014-12-20 10:05:53
【问题描述】：

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

滚动前

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

滚动约 500 像素或更好，但达到当前窗口大小的 100%

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

【问题讨论】：

$(document).scroll(function(){ ... }) 见api.jquery.com/scroll

标签： jquery twitter-bootstrap

【解决方案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>

【讨论】：

是的，完全正确。我试试看！！谢谢

【解决方案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;

}

【讨论】：