向下滾動引導導航欄，向下滾動，同時更改文本顏色

Question

因此，我正在開發一個Ruby on Rails應用程序，該應用程序具有給我的設計，該設計要求導航欄在頁面頂部透明，然后在向下滾動經過certian <section>之后變淡為純白色。頁面上，同時，導航欄鏈接文本在頂部為白色，並在同一<section>處逐漸變為灰色。

我已經研究過JavaScript，該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

這樣的事情可能會有所幫助：

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

將500更改為從頂部到頂部有多少像素，這是您要執行fadeOut的位置。

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

這很棒。 對於新手，對於不透明的類，我做了以下工作：

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

在過渡屬性下更改淡入淡出時間。 並非所有瀏覽器都支持此功能，但現在看起來不錯。