Question

我希望将导航从透明更改为滚动上的颜色。很像这个网站。 http://createone.com/contact-us/我看过关于改变大小的帖子很棒，我也会使用它，但我想主要从透明到颜色。任何帮助都会很棒。我对jquery有一点经验，但是根本无法弄明白或修改别人之前的问题。

我看到了这个，但却无法让它为我工作。 jquery change opacity and height on scroll

一个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

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

滚动时jquery导航颜色和高度更改

2 个答案: