要素をスクロールするときにCSSを変更するにはどうすればよいですか？

Question

私は3セクションを持っています：section-1、section-2およびsection-3を含みます。

section-2にスクロールすると、背景色メニュー（子要素section-2）が変更されます。

通常、私は通常のコードは：

var section = $("#section-2") 
var sectionOffSet = section2.offset().top; 
var sectionHeight = section2.height(); 

var $w_scroll = $(window).scroll(function(){ 
    if ($w.scrollTop() >= sectionOffSet && $w.scrollTop() <= (sectionOffSet + sectionHeight)) { 
    $('.menu-burger').css({'color':'#fff'}); 
    $('.menu-bg').css({'background':'#26ace2'}); 
    }else{ 
    $('.menu-burger').css({'color':'#26ace2'}); 
    $('.menu-bg').css({'background':'rgba(255, 255, 255, 0.9)'}); 
    } 
}); 

HTMLを適用するには、しかし、私の場合、私は、要素が隠されて持っているより多くの要素を表示するボタンLoad Moreをクリックする必要があります。

HTMLコード：機能Load Moreで

<section class="section-1"> 
    <div class="group-img-case-study col-md-12 col-sm-12 col-xs-12"> 

     <div class="col-md-6 col-sm-6 col-xs-12"> 
      <div class="group-case-study"> 
       <a href="#" target="_blank" ><img class='img-case-study' src="<?php echo upload_url().'case-study/case-study-1.png' ?>" alt="logo"></a> 
      </div> 
     </div> 

     <div class="col-md-6 col-sm-6 col-xs-12"> 
      <div class="group-case-study"> 
       <a href="#" target="_blank" ><img class='img-case-study' src="<?php echo upload_url().'case-study/case-study-2.png' ?>" alt="logo"></a> 
      </div> 
     </div> 

    </div> 

    <div class="group-img-case-study col-md-12 col-sm-12 col-xs-12"> 

     <div class="col-md-6 col-sm-6 col-xs-12"> 
      <div class="group-case-study"> 
       <a href="#" target="_blank" ><img class='img-case-study' src="<?php echo upload_url().'case-study/case-study-1.png' ?>" alt="logo"></a> 
      </div> 
     </div> 

     <div class="col-md-6 col-sm-6 col-xs-12"> 
      <div class="group-case-study"> 
       <a href="#" target="_blank" ><img class='img-case-study' src="<?php echo upload_url().'case-study/case-study-2.png' ?>" alt="logo"></a> 
      </div> 
     </div> 

    </div> 

    <div class="col-md-12 col-sm-12 col-xs-12 group-load-more-case-study text-center btn_load_more"> 
     <span id="loadMore"><img class="img-load-more-case-study" src="<?php echo upload_url().'case-study/load-more.png' ?>" alt="Load more"></span> 
    </div> 
</section> 

<section class="section-2"> 

</section> 

<section class="section-3"> 

</section> 

そして、JSファイル：

<script> 
    $(function() { 
    $('div.group-case-study').slice(0, 2).show(); 
    if ($("div.group-case-study:hidden").length == 0) { 
     $('.btn_load_more').css({ 
      'display': 'none' 
     }); 
    } 
    $('#loadMore').on('click', function(e) { 
     e.preventDefault(); 
     $("div.group-case-study:hidden").slice(0, 2).slideDown(); 

     if ($("div.group-case-study:hidden").length == 0) { 
     $('.btn_load_more').css({ 
      'display': 'none' 
     }); 
     } 
    }); 
    }); 
</script> 

私はsection-2にスクロールしたとき、私はsection-1効果の高さを考えます。メニューの背景を変更することはできません。

しかし、私はそれを行う電卓を知らない。

私はこのイメージはより多くの情報を表示すると思います。

Answer 1

あなたのコードの問題は何ですか？まず、jQueryがコンソールログにセクション印刷を検出したかどうかを確認します。それがうまくいかない場合は、CSSルールに "！important"を設定してください。 それは次のようになります。

if ($w.scrollTop() >= sectionOffSet && $w.scrollTop() <= (sectionOffSet + sectionHeight)) { 
    console.log('Section detected'); 
    $('.menu-burger').css({'color':'#fff'}); 
    $('.menu-bg').css({'background':'#26ace2 !important'}); 
}else{ 
    $('.menu-burger').css({'color':'#26ace2'}); 
    $('.menu-bg').css({'background':'rgba(255, 255, 255, 0.9) !important'}); 
} 

Answer 2

jqueryのCSS機能の

!重要

「をあなたがその

$（のようにこれを行うカント 動作しません（ "スタイル"、 "背景：＃26ace2！重要;"）;