jquery - 如何逐渐改变滚动导航栏的颜色?

标签 jquery css html navbar nav

我有一个透明的导航栏,我想逐渐改变颜色,直到它在 div 下方通过时最终变得不透明。我有这个:

$(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>

...到目前为止,我希望它在到达 div 的底部后变得不透明,而不是让页面的整个高度变得不透明,有人可以帮助我吗?提前致谢

最佳答案

在这里我获取了 div 的高度。因此,您的 nav 现在将在您需要的滚动时变得不透明。

这里我附上了 fiddle 。希望这会对你有所帮助。

jsfiddele

关于jquery - 如何逐渐改变滚动导航栏的颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37818794/

相关文章:

javascript - 区域.js : 140 Uncaught TypeError: Cannot read property 'remove'

html - 移动导航不适用于引导主题

java - 如果在 JSP 中选中复选框,则显示/隐藏内容

jquery - 单击选择字段时div消失

javascript - 防止iPad首页拖动

html - 分割进度条

javascript - Node-Webkit:使用参数重新加载页面

javascript - 为什么在选中单个复选框后在所有行上调用我的javascript函数?

javascript - 刷新数据表数据而不重新加载整个页面

html - 带有潜水图像的导航栏