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

Question

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

我希望我的导航栏是透明的，具有黑色背景，一旦它滚动到容器 div 及以上。

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

标签： jqueryhtmlcsswordpress

Answer 1

你也许可以：

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

3. 当滚动小于一个值时，做相反的事情

   $(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');
           }
       });
   });