JavaスクリプトからCSSコンテンツを変更する

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

。これは、これを引き起こす可能性が特異性を高める：

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

...この圧倒する：

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

あなたはすぐにそれはそれを修正するかどうかを確認するために!importantを削除しようとすることができます。

Answer 2

変更するコード：あなたのCSSファイルで!important宣言を使用している

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

Answer 3

はい、あなたがここにいるのは、（ブートストラップのために）確立しようとしているスタイルに対する特異性の問題です。私はあなたがここで何度もやりたいことをやったことがあります。私が使用する通常の解決策は、2 clases作成されます。

.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'); 
} 

を最後に、あなたが見ることができるよう、私が働いていません。白。私は、HTMLの要素に直接割り当てるので、それは次のとおりです。

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

デフォルトでは、すべてあなたが260に到達したとき、それは最後に割り当てられたクラスであるため、彼らは青になり、その後、白、としています。あなたのコードは少し変更されるでしょうが、それは私のために働いています...