html - 在向下滚动时淡化 Bootstrap 导航栏，同时更改文本颜色

Question

所以我正在开发一个 Ruby on Rails 应用程序，其设计要求导航栏在页面顶部是透明的，然后在向下滚动超过 certian <section> 后逐渐变为纯白色页面，同时，导航栏链接文本在顶部是白色的，并且会在相同的 <section> 处淡化为灰色。

我研究过在向下滚动时改变不透明度的 JavaScript，但我没有成功让它工作。我想在导航栏中淡入白色的相同功能也适用于导航栏链接淡入灰色。

我也研究过 Bootstrap 上的 .affix js [插件，但我不知道非常高级的 javascript 来修改它以满足我的需要。如果有帮助，我的应用程序 View 中的导航栏结构开始为:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">
        <%= image_tag "logo-small.png" %>
      </a>

... "render partial" lines depending on if the user is logged in or not ...

感谢任何帮助!我真的很想让这个设计工作，而且我已经完成了大部分工作，这个特殊的部分让我感到难过。感谢您的帮助!

Answer 1

这样的事情可能会有所帮助:

window.addEventListener("scroll", function() {
    if (window.scrollY > 500) {
        $('.navbar').fadeOut();
    }
    else {
        $('.navbar').fadeIn();
    }
},false);

将 500 更改为距顶部多少像素，即您要在其上进行淡出。