Question

当您向下滚动到＆＃34;黄色部分＆＃34;

时，我使用此代码向菜单项添加一些类

var showing = false;

$(window).scroll(function() {
   var topofbox = ($('#yellow-section').position().top - ($('#yellow-section').position().top / 2)), //start height
       hH = $('#yellow-section').outerHeight(),
       wH = $(window).height(),
       wS = $(this).scrollTop();


   if (wS > (topofbox+hH-wH)){
    if(showing == false){
       $( ".position" ).fadeIn();
       $( ".position" ).addClass("animated rubberBand");
       $( ".c1" ).addClass("yellowcircle");
       $( ".c2" ).addClass("yellowoutline");
       $( ".c3" ).addClass("yellowoutline");
       $( ".c4" ).addClass("yellowoutline");
       $( ".c5" ).addClass("yellowoutline");
       $( ".c6" ).addClass("yellowoutline");
       showing = true;
}
   }
   else{
    if(showing == true){
    $( ".position" ).fadeOut();
    showing = false;
   }
}
});

我的HTML：

 <div class="position">
        <div class="row">
    <div class="col-xs-12 col-md-12 col-lg-12 vcenter">
        <div class="circle c1"></div>
    </div><!--
    --><div class="col-xs-12 col-md-12 col-lg-12 vcenter">
        <div class="circle c2"></div>
    </div>
    <div class="col-xs-12 col-md-12 col-lg-12 vcenter">
        <div class="circle c3"></div>
    </div>
    <div class="col-xs-12 col-md-12 col-lg-12 vcenter">
        <div class="circle c4"></div>
    </div>
    <div class="col-xs-12 col-md-12 col-lg-12 vcenter">
        <div class="circle c5"></div>
    </div>
    <div class="col-xs-12 col-md-12 col-lg-12 vcenter">
        <div class="circle c6"></div>
    </div>
</div>
      </div>

还有几个部分，我希望在它击中时更改类，但我似乎只能在位置在黄色部分之前或在黄色部分之后执行此操作。

每当屏幕滚动到不同的div（红色部分，绿色部分）时，我想实现课程更改 - 请有人协助吗？

在jquery中更改2个div之间的滚动功能

0 个答案: