如何在滚动到元素时更改CSS？

我有3个部分，包括：section-1,section-2和section-3。如何在滚动到元素时更改CSS？

当我滚动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代码：

<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文件中的函数Load More：

<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-1效果的高度时，我滚动到section-2。它不能改变菜单的背景。

但我不知道计算器做到这一点。

我觉得这张图片会显示更多信息。

来源

2017-02-21 vanloc

请提供包含图片的工作代码片段。 –

看到这个例子：http://jsfiddle.net/gUWdJ/3/ –

你的代码有什么问题？首先，尝试查看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'}); 
}

来源

2017-02-21 11:39:46

我检查。 '！重要'不起作用。你能在更新我的问题时看到更多信息吗？感谢@米格尔·塞拉诺。 – vanloc

jQuery中的CSS功能

!重要

不工作你不能做到这一点像

$

（” .menu-bg'）。attr（“style”，“background：＃26ace2！important;”）;

来源

2017-02-25 06:01:15

如何在滚动到元素时更改CSS？

回答

相关问题