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

Question

我正在处理这个模板，我希望导航在用户开始滚动时改变颜色。 我一直在玩 jQuery，到目前为止我已经掌握了这个功能。 但！ 我希望颜色能够更改为非常特定的颜色，在本例中为 HEX 或 RGBA 颜色，而不仅仅是标准名称颜色（即蓝色、红色、黑色等）。 这是我下面的代码

$(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，我不确定如何继续。 任何指针？

提前谢谢了！

Answer 1

首先，我会将 css 声明从background更改为background-color 。 使用background您可以更改您可能拥有的任何其他背景属性，例如background-size 、 background-position等。

由于您只是想从预定义的 CSS 颜色转换为 HEX 颜色，因此您只需像处理black一样将值放入其中。

注意：您还需要将 else 块中的 css 声明从none更改为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>

Answer 2

使用 prop() 而不是 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"});
                }
            });
        });

Answer 3

仅更改您编写内联 css 的脚本

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

改变

background=>background-color

Answer 4

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

你的路线

然后它会向您的用户呈现您的意图，即他们在您的应用程序/网站上的位置。

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

请注意锚标记上的#page-top路由。

<body id="page-top">

那就是路线将带您去的地方。 如果您的 URL 中包含#page-top ，页面将自动滚动到那里，如果您对 JQuery 中的锚标记执行点击事件，那么它会移动到该位置。

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

这是GitHub 存储库中的一个工作示例

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

问题描述

4 个解决方案

解决方案1
1 2016-12-04 05:21:40

解决方案2
0 2016-12-04 05:33:12

解决方案3
0 2016-12-04 05:51:53

解决方案4
0 2016-12-04 06:14:42

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

问题描述

4 个解决方案

解决方案1 1 2016-12-04 05:21:40

解决方案2 0 2016-12-04 05:33:12

解决方案3 0 2016-12-04 05:51:53

解决方案4 0 2016-12-04 06:14:42

解决方案1
1 2016-12-04 05:21:40

解决方案2
0 2016-12-04 05:33:12

解决方案3
0 2016-12-04 05:51:53

解决方案4
0 2016-12-04 06:14:42