jquery導航滾動上的顏色和高度變化

我正在尋找將導航從透明更改爲滾動上的顏色。很像這個網站。 http://createone.com/contact-us/我已經看到有關改變尺寸的帖子很好，我也會用它，但是主要是從透明到顏色。任何幫助都會很棒。我對jquery有一點經驗，但一直未能弄清楚或修改別人以前的問題以滿足我的需求。jquery導航滾動上的顏色和高度變化

我看到了這個，但無法讓它爲我工作。 jquery change opacity and height on scroll

一個jsfiddle演示會很棒！

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

來源

2013-11-26 znels

嗨，你可以檢查此開始：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') 
     } 
    }) 
})

我會解釋你一步一步：

首先這個每次滾動窗口

$（窗口）.scroll（函數時（執行相應的功能）

第二次閱讀從滾動的頂部的值就知道你有多麼推進

變種ST = $（本）.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') 
```

來源

2013-11-26 16:57:26 DaniP

這看起來不錯！我會在我的網站上嘗試一下。非常感謝！我會讓你知道它是怎麼回事。 – znels

完美的你可以用更高級的東西來完成這個過渡或動畫，但這是你可以開始的方式 – DaniP

這真棒！我把它做得很好。是否有一個簡單的解決方案，讓它在短時間內發生，所以它不那麼跳躍？ – znels

在這個site中，導航高度實際上並未改變。這是fixed positioning。導航相對於瀏覽器窗口定位。

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; 
}

來源

2013-11-26 16:47:14

是啊，我瞭解固定的資產淨值，但他們的部分在導航背景上也從透明切換到白色。你能告訴我如何做這樣的事情嗎？非常感謝btw的快速反應。 – znels

它們根據滾動來改變正文元素的類。午餐後我會讓你舉個簡單的例子！ –

jquery導航滾動上的顏色和高度變化

回答

相關問題