首页 文章

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

提问于
浏览 次
1

我正在使用这个模板，我希望导航在用户开始滚动时改变颜色 . 我一直在玩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而不仅仅是黑色或红色等等？我真的很难过 . 代码运行良好，一旦用户滚过 Headers ，它会将颜色从透明变为黑色，但我希望黑色是这个十六进制代码＃04B297，我不确定如何继续 . 有什么指针吗？

提前谢谢了！

javascript jquery scroll colors navigation

4 回答

  • 0

    首先，我会将 background 的css声明更改为 background-color . 使用 background ，您正在更改您可能拥有的任何其他背景属性 background-size ， background-position 等 .

    由于您只是尝试从预定义的CSS颜色转换为HEX颜色，您只需将值放在内部，就像使用 black 一样 .

    Note: 您还需要将您的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>
    回复于
  • 1

    使用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"});
                }
            });
        });
    回复于
  • 0

    只在您编写内联css的位置更改脚本

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

    更改

    background=>background-color
    回复于
  • 0

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

    你的路线

    然后它会向您的用户显示您在应用程序/网站上 they 的意图 .

    <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中对锚标记执行click事件，则会追溯，然后它将移动到该位置 .

    对于颜色，您可以使用表示不同颜色的CSS类，然后在Jquery中添加/删除css属性 .

    这是GitHub repository中的一个工作示例

    回复于

相关问题