向下滚动引导导航栏，向下滚动，同时更改文本颜色 [英] Fading bootstrap navbar on scrolldown, while changing text color

问题描述

所以我正在开发一个Ruby on Rails应用程序，该应用程序具有给我的设计，该设计要求导航栏在页面顶部透明，然后在向下滚动经过certian 上，导航栏链接文本在顶部为白色，并且在相同的<section>处将褪色为灰色.

so I'm working on a Ruby on Rails app with a design given to me which calls for the navigation bar to be transparent at the top of the page, and then fade into solid white after scrolling down past a certian <section> on the page, at the same time, the navbar link text is white at the top, and will fade to grey at the same <section>.

我已经研究过JavaScript，该JavaScript可以在向下滚动时改变不透明度，但是我还没有成功使其能够正常工作.我以为可以在导航栏中淡化为白色的相同功能也可以在导航栏链接也逐渐淡化为灰色的情况下使用.

I've looked into JavaScript that changes opacity on scrolldown, but I haven't had success getting it to work. I'd imagine that the same function(s) to fade in the navbar to white, would also work with the navbar links fading to grey as well.

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

I've also looked into the .affix js [plugin on Bootstrap, but I don't know very advanced javascript to modify it to my needs. In case it's helpful, the navbar's structure in my the app's view starts as:

<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 ...

任何帮助都将受到赞赏！我真的很想让这个设计正常工作，并且我已经完成了大部分设计，这部分让我感到困惑.感谢您的帮助！

Any and all help is appreciated! I'd really love to get this design working, and I've done most of it already, this particular part has me stumped. Any help is appreciated!

推荐答案

类似的方法可能会有所帮助:

Something like this might help:

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

将500更改为从顶部开始有多少像素，就是您要在其处进行渐变输出.

Change 500 with however many pixels from the top the place is that you want to do the fadeOut at.

这篇关于向下滚动引导导航栏，向下滚动，同时更改文本颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！