检测固定项元素和多个静态元素之间的重叠

时间：2018-02-15 21:22:24

标签： javascript jquery html css

我正在尝试检测我的固定元素（使用类固定）与其他静态/可移动元素的重叠。基于结果true / false我正在改变我的固定元素的字体颜色。

因此，当固定元素与黑盒重叠时，它的字体颜色变为白色和黑色。我的问题是，这只适用于第三个移动元素。

第一个和第二个移动元素也重叠，但我的固定元素的字体颜色没有变化。因此IF条件仅适用于第三个移动元素。

任何人都可以帮我修改我的代码，以便我的固定元素的字体颜色在重叠所有三个移动元素时发生变化吗？

My Pen

＆＃13;
＆＃13; 
function collision($fixed, $moving) {
  var x1 = $fixed.offset().left;
  var y1 = $fixed.offset().top;
  var h1 = $fixed.outerHeight(true);
  var w1 = $fixed.outerWidth(true);
  var b1 = y1 + h1;
  var r1 = x1 + w1;
  var x2 = $moving.offset().left;
  var y2 = $moving.offset().top;
  var h2 = $moving.outerHeight(true);
  var w2 = $moving.outerWidth(true);
  var b2 = y2 + h2;
  var r2 = x2 + w2;

  if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
  return true;
}

$(window).scroll(function() {
  $(".moving").each(function() {
    //console.log($(this));
    if (collision($(".fixed"), $(this))) {
      $('.fixed').css('color', 'white');
    } else {
      $('.fixed').css('color', 'black');
    }
  });
});
＆＃13; 
.fixed {
  color: black;
  position: fixed;
  top: 50px;
}

.moving {
  width: 400px;
  height: 100px;
  background-color: black;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="fixed">
  Fixed Element
</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="moving">
</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="moving">
</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="moving">
</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：3)

仅仅因为你为每一个应用逻辑，因此只考虑最后一个。每一个都会更改相同元素的字体颜色，并且只保留最后一次更改。

例如，当您在第一个黑盒子中时，您将测试所有三个黑盒子。第一个将提供 true ，第二个 false ，第三个 false ，您将以false结尾，因为它是最后一个。这就是为什么它只适用于最后一次，因为当最后一个给出时，你将在其他两个应用黑色后得到白色。

相反，你需要应用OR逻辑，当一个给出真实时你停止而不检查其他逻辑：

function collision($fixed, $moving) {
  var x1 = $fixed.offset().left;
  var y1 = $fixed.offset().top;
  var h1 = $fixed.outerHeight(true);
  var w1 = $fixed.outerWidth(true);
  var b1 = y1 + h1;
  var r1 = x1 + w1;
  var x2 = $moving.offset().left;
  var y2 = $moving.offset().top;
  var h2 = $moving.outerHeight(true);
  var w2 = $moving.outerWidth(true);
  var b2 = y2 + h2;
  var r2 = x2 + w2;

  if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
  return true;
}

$(window).scroll(function() {
      var all = $(".moving");
      for (var i = 0; i < all.length; i++) {
         if (collision($(".fixed"), all.eq(i))) {
             $('.fixed').css('color', 'white');
             break; //no need to test the others !
           } else {
             $('.fixed').css('color', 'black');
           }
         }
      });
.fixed {
  color: black;
  position: fixed;
  top: 50px;
}

.moving {
  width: 400px;
  height: 100px;
  background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="fixed">
  Fixed Element
</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="moving">
</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="moving">
</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="moving">
</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

答案 1 :(得分：0)

我煞费苦心地写下了以下碰撞代码 - ENJOY

＆＃13;
＆＃13; 
//<![CDATA[
/* collider.js - written by Jason Raymond Buckley */
$(function(){
$.fn.extend({
  allCollided:function(jQueryNode, includeBorders, includeMargins){
    var r = true, im = !!includeMargins;
    this.each(function(i, e){
      var o = $(e), ow = o.width(), oh = o.height(), os = o.offset(), ot = os.top, ob = oh+ot, ol = os.left, or = ow+ol;
      var oT = parseFloat(o.css('borderTopWidth')), oR = parseFloat(o.css('borderRightWidth')), oB = parseFloat(o.css('borderBottomWidth'));
      var oL = parseFloat(o.css('borderLeftWidth'));
      if(includeBorders){
        if(im){
          oB += parseFloat(o.css('marginBottom'))+oT; oT += parseFloat(o.css('marginTop')); oR += parseFloat(o.css('marginRight'))+oL;
          oL += parseFloat(o.css('marginLeft')); ot -= oT; or += oR; ob += oB; ol -= oL;
        }
        else{
          or += oR+oL; ob += oB+oT;
        }
      }
      else{
        ot += oT; or += oR; ob += oB; ol += oL;
      }
      jQueryNode.each(function(i, e){
        var t = $(e), tw = t.width(), th = t.height(), ts = t.offset(), tt = ts.top, tb = th+tt, tl = ts.left, tr = tw+tl;
        var tT = parseFloat(t.css('borderTopWidth')), tR = parseFloat(t.css('borderRightWidth')), tB = parseFloat(t.css('borderBottomWidth'));
        var tL = parseFloat(t.css('borderLeftWidth'));
        if(includeBorders){
          if(im){
            tB += parseFloat(t.css('marginBottom'))+tT; tT += parseFloat(t.css('marginTop')); tR += parseFloat(t.css('marginRight'))+tL;
            tL += parseFloat(t.css('marginLeft')); tt -= tT; tr += tR; tb += tB; tl -= tL;
          }
          else{
            tr += tR+tL; tb += tB+tT;
          }
        }
        else{
          tt += tT; tr += tR+tL; tb += tB; tl += tL;
        }
        if(!((ot <= tb && ob >= tt || tt <= ob && tb >= ot) && (ol <= tr && or >= tl || tl <= or && tr >= ol))){
          r = false;
          return false;
        }
      });
      if(r === false){
        return false;
      }
    });
    return r;
  },
  anyCollided:function(jQueryNode, includeBorders, includeMargins){
    var r = false, im = !!includeMargins;
    this.each(function(i, e){
      var o = $(e), ow = o.width(), oh = o.height(), os = o.offset(), ot = os.top, ob = oh+ot, ol = os.left, or = ow+ol;
      var oT = parseFloat(o.css('borderTopWidth')), oR = parseFloat(o.css('borderRightWidth')), oB = parseFloat(o.css('borderBottomWidth'));
      var oL = parseFloat(o.css('borderLeftWidth'));
      if(includeBorders){
        if(includeMargins){
          oB += parseFloat(o.css('marginBottom'))+oT; oT += parseFloat(o.css('marginTop')); oR += parseFloat(o.css('marginRight'))+oL;
          oL += parseFloat(o.css('marginLeft')); ot -= oT; or += oR; ob += oB; ol -= oL;
        }
        else{
          or += oR+oL; ob += oB+oT;
        }
      }
      else{
        ot += oT; or += oR; ob += oB; ol += oL;
      }
      jQueryNode.each(function(i, e){
        var t = $(e), tw = t.width(), th = t.height(), ts = t.offset(), tt = ts.top, tb = th+tt, tl = ts.left, tr = tw+tl;
        var tT = parseFloat(t.css('borderTopWidth')), tR = parseFloat(t.css('borderRightWidth')), tB = parseFloat(t.css('borderBottomWidth'));
        var tL = parseFloat(t.css('borderLeftWidth'));
        if(includeBorders){
          if(includeMargins){
            tB += parseFloat(t.css('marginBottom'))+tT; tT += parseFloat(t.css('marginTop')); tR += parseFloat(t.css('marginRight'))+tL;
            tL += parseFloat(t.css('marginLeft')); tt -= tT; tr += tR; tb += tB; tl -= tL;
          }
          else{
            tr += tR+tL; tb += tB+tT;
          }
          tw = t.outerWidth(im); th = t.outerHeight(im);
        }
        else{
          tt += tT; tr += tR+tL; tb += tB; tl += tL;
        }
        if((ot <= tb && ob >= tt || tt <= ob && tb >= ot) && (ol <= tr && or >= tl || tl <= or && tr >= ol)){
          r = true;
          return false;
        }
      });
      if(r === true){
        return false;
      }
    });
    return r;
  }
});
/* collider.js - written by Jason Raymond Buckley */
var fixedL = $('#fixedL'), fixedR = $('#fixedR'), fixedM = $('#fixedM'), moving = $('.moving');
if(moving.anyCollided(fixedL, true)){
  fixedL.css('color', 'white');
}
$(window).scroll(function(){
  if(moving.anyCollided(fixedR)){
    fixedR.css('color', 'orange');
  }
  else{
    fixedR.css('color', '#000');
  }
  if(fixedM.anyCollided(moving, true, true)){
    fixedM.css('color', '#0a0');
  }
  else{
    fixedM.css('color', '#000');
  }
  if($('#red').allCollided(fixedL, true)){
    fixedL.css('color', 'red');
  }
  else if($('#tiny_w_margins').allCollided(fixedL, true, true)){
    fixedL.css('color', 'yellow');
  }
  else if($('#borders_only').allCollided(fixedL, true)){
    fixedL.css('color', 'lightBlue');
  }
  else if($('#green').allCollided(fixedL)){
    fixedL.css('color', 'lightGreen');
  }
  else if(fixedL.allCollided($('#blue'))){
    fixedL.css('color', 'blue');
  }
  else if(fixedL.anyCollided(moving)){
    fixedL.css('color', 'white');
  }
  else{
    fixedL.css('color', 'black');
  }
});
});
//]]>
＆＃13; 
/* external.css */
html,body{
  padding:0; margin:0;
}
body{
  background:#fff; overflow-y:scroll;
}
.main{
  width:940px; background:#ccc; padding:20px; margin:0 auto;
}
.fixed{
  color:#000; position:fixed;
}
#fixedL{
  top:50px;
}
#fixedR{
  right:100px;
}
#fixedM{
  bottom:10px; left:150px; border-right:35px solid #700; margin:7px 35px 25px 15px;
}
.moving {
  width:400px; height:100px; background-color:#000;
}
.space{
  height:200px;
}
#blue,#red{
  width:700px; margin-left:150px;
}
#tiny_no_margins,#tiny_w_margins{
  width:10px; height:80px;
}
#tiny_w_margins{
  border:15px solid purple; margin:5px 10px 5px 250px;
}
#borders_only{
  width:40px; border:25px solid brown; margin:80px;
＆＃13; 
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <meta name='viewport' content='width=device-width' />
    <title>jQuery Collider</title>
    <link type='text/css' rel='stylesheet' href='external.css' />
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
    <script type='text/javascript' src='collider.js'></script>
  </head>
<body>
  <div class='main'>
    <div id='out'>
      <div id='fixedL' class='fixed'>Fixed Left</div>
      <div id='fixedR' class='fixed'>Fixed Right</div>
      <div id='fixedM' class='fixed'>Fixed with Border and Margins</div>
      <div class='moving'></div>
      <div class='space'></div>
      <div id='green' class='moving'></div>
      <div class='space'></div>
      <div id='blue' class='moving'></div>
      <div class='space'></div>
      <div id='red' class='moving'></div>
      <div class='space'></div>
      <div id='tiny_no_margins' class='moving'></div>
      <div class='space'></div>
      <div id='tiny_w_margins' class='moving'></div>
      <div class='space'></div>
      <div id='borders_only' class='moving'></div>
      <div class='space'></div>
      <div class='moving'></div>
      <div class='space'></div>
    </div>
  </div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题