向下滚动时褪色引导导航栏，同时更改文本颜色

Question

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

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

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

<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

这太棒了。对于新手，对于 opaque 类，我做了以下操作：

.navbar-default {
  min-height: 120px;
  opacity: 0;
  transition: opacity .5s;
}
.opaque {
  opacity: 1;
  transition: opacity .5s;
}

在transition属性下更改淡入淡出时间。这不适用于所有浏览器，但现在看起来很棒。

Answer 2

更简单的解决方案是创建一个 CSS 类，然后在滚动条上添加/删除它：

.navbar-fixed-top { background-color: rgba(255,255,255,1);transition: background-color 2s ease 0s;}
.navbar-fixed-top.opaque { background-color: rgba(255,255,255,0);transition: background-color 2s ease 0s;

}

Javascript：

$(window).scroll(function() {
    if($(this).scrollTop() > 300) {
        $('.navbar-fixed-top').addClass('opaque');
    } else {
        $('.navbar-fixed-top').removeClass('opaque');
    }
});

我们的网站也有类似的效果：www.kmo.com.au

Answer 3

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

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

将 500 更改为从顶部开始的许多像素，即您要在该位置进行淡出处理。