如何让滚动的jQuery更改导航颜色？

我正在研究此模板，并且我希望导航在用户开始滚动后更改颜色。我一直在玩jQuery，到目前为止我已经获得了功能。但！我希望颜色能够改变成非常特定的颜色，在这种情况下是HEX或RGBA颜色，而不仅仅是标准的名称颜色（即蓝色，红色，黑色等）。这是下面如何让滚动的jQuery更改导航颜色？

$(document).ready(function() { 
      var a = $(".navbar").offset().top; 

      $(document).scroll(function(){ 
       if($(this).scrollTop() > a) 
       { 
        $('.navbar').css({"background":"black"}); 
       } else { 
        $('.navbar').css({"background":"none"}); 
       } 
      }); 
     });

我在哪里更改名为.css jQuery选择的.navbar我的代码，我怎么可以改变背景颜色为十六进制或RGBA，而不只是黑色或红色或诸如此类的东西？我真的很难过。代码运行良好，一旦用户滚动浏览标题，它将颜色从透明变为黑色，但我希望黑色是这个十六进制代码＃04B297，我不确定如何继续。任何指针？

非常感谢提前！

来源

2016-12-04 Stephen M

嘿。我的答案是否解决了您的问题？ –

首先我会将css声明从background更改为background-color。随着background你改变任何其他背景属性，你可能有像background-size，background-position等

既然你只是想从一个预定义的CSS颜色，一个十六进制颜色的去你根本只是把里面的值就像你使用black一样。

注：您还需要从none在else块来改变你的CSS声明transparent为none不是一个正确的背景颜色值。

$(document).ready(function() { 
 
    var a = $(".navbar").offset().top; 
 

 
    $(document).scroll(function(){ 
 
    if($(this).scrollTop() > a) { 
 
     $('.navbar').css({"background-color":"#04B297"}); 
 
    } else { 
 
     $('.navbar').css({"background-color":"transparent"}); 
 
    } 
 
    }); 
 
});

html, 
 
body { 
 
    height: 1000px; 
 
} 
 

 
.navbar { 
 
    border: 1px solid black; 
 
    height: 60px; 
 
} 
 

 
.navbar--dark { 
 
    background-color: #04B297 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="navbar"></div>

我建议通过将这些颜色状态，以自己的修饰符的类。你会获得一点性能提升，而且它更具可管理性。有了这个，您可以简单地使用toggleClass()来切换深色背景色。第二个参数是它用来确定何时切换的基于布尔的值。

$(document).ready(function() { 
 
    var a = $(".navbar").offset().top; 
 
    
 
    $(document).scroll(function(){ 
 
    $('.navbar').toggleClass('navbar--dark', $(this).scrollTop() > a); 
 
    }); 
 
});

html, 
 
body { 
 
    height: 1000px; 
 
} 
 

 
.navbar { 
 
    border: 1px solid black; 
 
    height: 60px; 
 
} 
 

 
.navbar--dark { 
 
    background-color: #04B297 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="navbar"></div>

来源

2016-12-04 05:21:40

这工作就像一个魅力，虽然不能让我的CSS中的类工作，但jQuery本身是完美的！非常感谢！ –

好听！不要忘记标记为正确的。 –

使用道具（）而不是CSS

$(document).ready(function() { 
      var a = $(".navbar").offset().top; 

      $(document).scroll(function(){ 
       if($(this).scrollTop() > a) 
       { 
        $('.navbar').prop({"background","#FFF000"}); 
       } else { 
        $('.navbar').prop({"background","#333333"}); 
       } 
      }); 
     });

来源

2016-12-04 05:33:12

只能改变你的脚本，你写你的在线CSS

$('.navbar').css({"background":"black"});

变化

background=>background-color

来源

2016-12-04 05:51:53

上面提到的一些好主意。另一种方法是使用导航栏：

路线

因为那么它呈现给用户您在哪里他们都在你的应用程序/网站的意图。

<a class="navbar-brand page-scroll" href="#page-top"> 
       <img src="img/conceptco_home_logo.png" /> 
      </a>

请注意锚标记＃页面顶部路线。

<body id="page-top">

这就是路线将带你去的地方。如果您的网址中包含＃page-top，那么如果您在JQuery中的定位标记上执行了单击事件，那么该页面将自动滚动到那里，然后它将移动到该位置。

对于颜色，你可以有一个表示不同颜色的CSS类，然后在Jquery中添加/删除css属性。

这里是一个在GitHub repository的工作示例

来源

2016-12-04 06:14:42 leeroya

如何让滚动的jQuery更改导航颜色？

回答

相关问题