检测具有固定位置的div何时越过多个元素并更改颜色

Question

之前已经问过类似的问题 - ＆gt; Detect when a div with fixed position crosses over another element

但我想知道它如何应用于多个.div-to-cross元素？ @Louys Patrice Bessette提供的答案效果很好，但仅限于单个.div-to-cross元素。我认为可以简单地创建另一个.div-to-cross而the.fixed元素会改变它的颜色，但事实并非如此。

感谢您的帮助！

$(window).scroll(function(){
  var fixed = $("div.fixed");
  
  var fixed_position = $("div.fixed").offset().top;
  var fixed_height = $("div.fixed").height();

  var toCross_position = $(".div-to-cross").offset().top;
  var toCross_height = $(".div-to-cross").height();

  if (fixed_position + fixed_height  < toCross_position) {
    fixed.removeClass('white');
  } else if (fixed_position > toCross_position + toCross_height) {
    fixed.removeClass('white');
  } else {
    fixed.addClass('white');
  }

});

body {
  height: 200vH;
}

.fixed{
  position:fixed;
  top:calc(50% - 50px);
  left:0;
  background-color:black;
  height:100px;
  width:100%;
}
.white{
  background-color:white;
}
.div-to-cross{
  height:100px;
  background-color:blue;
}

/* just for this demo */
.spacer{
  height:400px;
}

<div class="fixed"></div>
<div class="spacer"></div>
<div class="div-to-cross"></div>
<div class="spacer"></div>
<div class="div-to-cross"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

我给你一个更简单的版本。但你可以让它变得更好。我使用的是您在问题中使用的相同方法。我只是为所有三个div重复循环。

$(window).scroll(function(){
  var fixed = $("div.fixed");
  
  var fixed_position = $("div.fixed").offset().top;
  var fixed_height = $("div.fixed").height();
  
  var checkpos = function(id){
    var toCross_position = $("#" + id + ".div-to-cross").offset().top;
    var toCross_height = $("#" + id + ".div-to-cross").height();
    
    var fixedtgt = $("div.fixed[data-id='"+ id +"']");
    var color = $("#"+id).attr('data-color');
    if (fixed_position + fixed_height  < toCross_position) {
      fixedtgt.css({'background-color':'black','z-index':'0' });
    } else if (fixed_position > toCross_position + toCross_height) {
      fixedtgt.css({'background-color':'black','z-index':'0' });
    } else {
      fixedtgt.css({'background-color': color,'z-index':'1' });
    }
  }
  
  checkpos("divone");
  checkpos("divtwo");
  checkpos("divthree");
});

body {
  height: 200vH;
}

.fixed{
  position:fixed;
  top:calc(50% - 50px);
  left:0;
  background-color:black;
  height:100px;
  width:100%;
}
.div-to-cross{
  height:100px;
  background-color:blue;
}

/* just for this demo */
.spacer{
  height:400px;
}

<div class="fixed" data-id="divone"></div>
<div class="fixed" data-id="divtwo"></div>
<div class="fixed" data-id="divthree"></div>
<div class="spacer"></div>
<div class="div-to-cross" id="divone" data-color="white"></div>
<div class="spacer"></div>
<div class="div-to-cross" id="divtwo" data-color="red"></div>
<div class="spacer"></div>
<div class="div-to-cross" id="divthree" data-color="yellow"></div>
<div class="spacer"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>