jquery导航颜色和高度在滚动上的更改

我希望将导航从透明更改为滚动的颜色。很像这个网站。我看过一些关于改变尺寸的帖子，这很好，我也会用这个，但我想主要是从透明变成颜色。任何帮助都会很好。我确实对jquery有一点经验，但还没有弄明白，也没有根据我的需要修改别人以前的问题

我看到了这个，但没能让它为我工作

一个JSFIDLE演示会很棒

提前谢谢你的帮助。我也在使用Bootstrap4，所以如果有插件的话。我对此也持开放态度。

在这种情况下，导航高度实际上并没有改变。是的。导航是相对于浏览器窗口定位的

HTML:

---

您好，您可以选中此项开始：

我在这里做了这个函数：

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

我会一步一步地向你解释：

• 首先，每次滚动窗口时都会执行该函数

$（窗口）。滚动（函数（）

• 第二，从卷轴顶部读取数值，以了解您前进了多少

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')
  

---

是的，我理解关于固定导航的部分，但导航背景也从透明变为白色。你能告诉我怎么做吗？非常感谢你的快速响应。他们根据卷轴改变身体元素的类别。午饭后我给你举个简单的例子！这看起来很棒！我要走了在我的网站上试一试。非常感谢！我会让你知道它是如何运行的。完美你可以用更高级的东西来完成它，比如过渡或动画，但这是你可以开始的方式。这太棒了！我让它完美地工作了。有没有一个简单的解决方案可以让它在短时间内发生，这样就不会那么紧张？当然你可以使用过渡：所有的1；在叠加检查中，这太棒了。非常感谢。你真的帮了我很多忙。

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

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