滚动时如何使导航颜色发生变化？

Question

这是我目前拥有的，但正如你所看到的 (www.lucasdebelder.be)，导航在滚动后一直隐藏到 200 像素，但我有点想改变它。通过让导航在开始时显示，但在滚动 200 像素之后，更改颜色（背景颜色和颜色）。我将尝试通过图片和示例来展示我想要的内容。

So this is what it should look like upon entering on the website.

And then if you scroll down it should transform into this.

这就是我的 jquery 在 atm 的样子。

(function($) {          
    $(document).ready(function(){                    
        $(window).scroll(function(){                          
            if ($(this).scrollTop() > 200) {
                $('nav').fadeIn(500);
            } else {
                $('nav').fadeOut(500);
            }
        });
    });
})(jQuery);

Answer 1

试试这个：

$(window).scroll(function(){
  if ($(this).scrollTop() > 200) {
      $('nav').addClass('bg-color');
  } else {
      $('nav').removeClass('bg-color');
  }
});

这将在 200 像素滚动后在您的导航中添加类“bg-color”

现在通过在您的 css 文件中添加此代码为 bg-color 赋予颜色

.bg-color {
  background-color:red;
  -moz-transition: all .2s ease-in;
  -o-transition: all .2s ease-in;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
}

Answer 2

var size= $(".nav").offset().top;

        $(document).scroll(function(){
            if($(this).scrollTop() > size)
            {   
               $('.nav').css({"background":"Blue"});
            } else {
               $('.nav').css({"background":"transparent"});
            }
        });