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一样。

注意：您还需要将您的其他广告管理系统中的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

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

你的路线

然后向您的用户显示您在应用程序/网站上他们的意图。

getActivity().getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN);

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

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

这就是路线将带您前往的地方。如果您的网址中包含＃page-top ，则该网页会自动滚动到那里，如果您在JQuery中对锚标记执行点击事件，则会回溯到该位置。

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

以下是GitHub repository

中的工作示例

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

4 个答案: