滚动时jquery导航颜色和高度更改
我想在滚动条上将导航从透明更改为颜色。 很像这个网站。 http://createone.com/contact-us/我看过关于改变大小的post很棒，我也会使用它，但我想主要从透明到颜色。 任何帮助都会很棒。 我对jquery有一点经验，但是无法弄清楚或根据我的需要修改别人以前的问题。
我看到了这个，但却无法让它为我工作。 jquery在滚动时改变不透明度和高度
一个jsfiddle演示会很棒！
在此先感谢您的帮助。 我也在使用Bootstrap 4，所以如果那里有任何插件。 我也对此持开放态度。
嗨，你可以检查这个开始： http ： //jsfiddle.net/rcAev/177/
在这里我做了这个function：
$(document).ready (function () { $(window).scroll (function () { var sT = $(this).scrollTop(); if (sT >= 300) { $('.overlay').addClass('cambio') }else { $('.overlay').removeClass('cambio') } }) }) 我会一步一步地解释你：
- 首先，每次滚动窗口时都会执行该function
$（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*/ } -
第四，将透明颜色更改为我应用的动作是添加具有新背景和不同高度的类：
$('.overlay').addClass('cambio')
在此站点中 ，导航高度实际上并未更改。 这是固定的定位 。 导航相对于浏览器窗口定位。
的jsfiddle
HTML：
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; }