jquery - 一旦它到达容器 div，将导航栏背景更改为黑色

Question

这是我正在处理的网站。 http://www.acetronaut.com/

我希望我的导航栏是透明的，在它滚动到容器 div 及之后时具有黑色背景。

我真的不知道从哪里开始使用 jquery。

Answer 1

你也许可以:

1. 监听滚动事件
2. 当滚动大于某个值(例如您的容器)时，将 css 规则放入您的导航栏 $(".acetrnt-stickynav-transparent").css('background','black');

3. 当scroll小于某个值时，做相反的事情

   $(function(){
       $(window).scroll(function(){
       var aTop = 50; //or $("#MycontainerId").heigth();
       if($(this).scrollTop()>=aTop){
           alert('Scroll is over 50px.');
           // instead of alert you can colorize you nav bar
           $(".acetrnt-stickynav-transparent").css('background','black');
       } else {
           $(".acetrnt-stickynav-transparent").css('background','none');
           }
       });
   });