Question

如果我向下滚动到我网站的某个位置，我怎样才能更改css文件中的背景颜色？

$(document).ready(function() {
    var scroll_pos = 0;
    $(document).scroll(function() {
        scroll_pos = $(this).scrollTop();
        if (scroll_pos > 260) {
            $('span[class="icon-bar"]').css('background-color', '#2CA8FF');
        } else {
            $('span[class="icon-bar"]').css('background-color', 'white');
        }
    });
});

.navbar - transparent.navbar - toggle.icon - bar, [class *= "navbar-ct"].navbar - toggle.icon - bar {
    background - color: white!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-ct-blue navbar-transparent navbar-fixed-top" role="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
    </div>
</nav>

它适用于其他内容，如图像，但不适用于此。为什么呢？

Answer 1

将代码更改为：

$('span.icon-bar').css('background-color', 'white');

Answer 2

您在css文件中使用了!important声明。这增加了特异性，这可能导致这种情况：

.icon-bar {
    background-color: white !important; 
}

......压倒这个：

$('span[class="icon-bar"]').css('background-color', '#2CA8FF');

您可以快速尝试删除!important，看看是否能解决问题。

Answer 3

是的，你在这里遇到的问题是针对你试图建立的样式的特殊性（因为Bootstrap）。我已经在这里完成了你想要的几次，通常我会结束写作！在颜色变化之后很重要。我使用的常规解决方案是创建两个分支：

.blue {
   background-color: #2CA8FF !important;
}

.white {
   background-color: #FFF !important;
}

然后在jquery中分配类而不是样式：

if(scroll_pos > 260) {
  $('span.icon-bar').addClass('blue');
} else {
  $('span.icon-bar').removeClass('blue');
}

最后，正如您所看到的，我没有使用.white。那是因为我将它直接分配给我的html中的元素：

<span class="icon-bar" class="white"></span>
<span class="icon-bar" class="white"></span>
<span class="icon-bar" class="white"></span>

默认情况下，所有都是白色，然后，当你达到260时，它们变成蓝色，因为它是最后一个分配的类。这会改变你的代码，但它对我有用......

从Java Script更改CSS内容

3 个答案: