Question

这是我目前所拥有的，但正如你所看到的（www.lucasdebelder.be），导航只是在滚动后隐藏到200px，但我有点想改变它。通过让导航显示在开始但滚动后让我们说200px，更改颜色（背景颜色和颜色）。我将尝试通过图片和示例演示我想要的内容。

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

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

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

Answer 2

试试这个：

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

这将添加类＆＃34; bg-color＆＃34; 200px滚动后导航中的导航

现在通过在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;
}

滚动时如何更改导航颜色？

2 个答案: