滾動時jquery導航顏色和高度更改

Question

我想在滾動時將導航從透明更改為顏色。 很像這個網站。 http://createone.com/contact-us/我看過關於改變尺寸的帖子很棒，我也會使用它，但我想主要從透明到顏色。 任何幫助都會很棒。 我對jquery有一點經驗，但是無法弄明白或者根據我的需要修改別人以前的問題。

我看到了這個但卻無法讓它為我工作。 jquery在滾動時改變不透明度和高度

一個jsfiddle演示會很棒！

在此先感謝您的幫助。 我也在使用Bootstrap 4，所以如果那里有任何插件。 我也對此持開放態度。

Answer 1

嗨，你可以檢查這個開始： http ： //jsfiddle.net/rcAev/177/

在這里我做了這個功能：

$(document).ready (function () {
 $(window).scroll (function () {
    var sT = $(this).scrollTop();
        if (sT >= 300) {
            $('.overlay').addClass('cambio')
        }else {
            $('.overlay').removeClass('cambio')
        }
  })
})

我會一步一步地解釋你：

• 首先，每次滾動窗口時都會執行該功能

$（window）.scroll（function（）

• 第二個讀取滾動頂部的值，以了解您前進了多少

var sT = $（this）.scrollTop（）;

• 第三個比較你想要的斷點，在這種情況下我選擇300，因為我想在從圖像傳遞高度后更改導航。

   if (sT >= 300) { /*action you want after the 300 or more scroll*/ }else { /*action you want before the 300 scroll*/ } 

• 四是改變透明上色我申請的行為是增加一個class有新的背景和不同的高度：

   $('.overlay').addClass('cambio') 

Answer 2

在此站點中 ，導航高度實際上並未更改。 這是固定的定位 。 導航相對於瀏覽器窗口定位。

的jsfiddle

HTML：

<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>
<div id="first"></div><div id="second"></div><div id="third"></div>

CSS：

ul.nav{
    position:fixed;
}
div#first{
    height:600px;
    width:100%;
    background:#59071D;
}
div#second{
    height:600px;
    width:100%;
    background:#735448;
}
div#third{
    height:600px;
    width:100%;
    background:#F2DDB6;
}