滚动时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')