检测固定位置的div是否跨越另一个元素 [英] Detect when a div with fixed position crosses over another element

问题描述

我有一个div（div），它可以让我们知道如何检测一个固定位置的div何时开始，并在滚动时停留在某个div上。总是处于固定位置并居中在我的窗口中。当我滚动我的页面时，我希望固定div在开始悬停另一个时更改其颜色，并在完成悬停后移除颜色。我附上了一个小模式来说明我的问题。要恢复：

当页面加载时具有黑色的固定div - >开始悬停第二个div，颜色变成白色 - >完成将鼠标悬停在第二个div上，颜色回黑。

我发现这个问题：检测位置：fixed;元素穿过另一个元素

它在div开始穿越第二个元素时起作用，但在悬停完成时不会重置颜色。我的代码：

  $（window）.scroll（function（）{
 if（$（'div.fixed '）.offset（）。top<（$（。div-to-cross）。offset（）。top  -  0））{
 $（'div.fixed'）。removeClass（'white '）; 
} else {
 $（'div.fixed'）。addClass（'white'）; 
} 
}）; 
  

预先感谢您的帮助。

查看图片

解决方案

您必须考虑到div高度。

有两个时刻来计算，入场和离场。

所以当固定div的底部进入滚动的顶部时......

当滚动的底部离开顶部固定。

以下是一个运行示例：

  $（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到交叉）高度（）; if（fixed_position + fixed_height  

.fixed {position：fixed; top：calc（50％ - 50px）;左：0;背景色：黑色;高度：100像素; width：100％;}。white {background-color：white;}。div-to-cross {height：100px; * /。spacer {height：400px;}

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script> < div class =fixed>< / div>< div class =spacer>< / div>< div class =div-to-cross>< / div>< ; div class =spacer>< / div>  

I'm struggling to find out how to detect when a div with position fixed start and finish to hover a certain div while scrolling.

I've a div always in position fixed and centered in my window. While I'm scrolling my page, I would like that the fixed div when starts to hover another one changes its color and remove the color once it finishes to hover. I attached a little schema to illustrate my problem. To resume:

The fixed div when page loads has black color -> Starts to hover a second div, the color turns to white -> Finish to hover the second div, the color is back to black.

I found this issue: Detect when a position: fixed; element crosses over another element

It works when the div start to cross the second one, but it doesn't reset the color when the hover is finished. My code:

$(window).scroll(function() {
  if ($('div.fixed').offset().top < ($(".div-to-cross").offset().top - 0)) {
    $('div.fixed').removeClass('white');
  } else {
    $('div.fixed').addClass('white');
  }
});

Thanks in advance for your help.

View image

解决方案

You have to take the div heights in account.

There is two "moments" to caculate, the enter and the leave.

So when the bottom of the fixed div enters the top of the scrolled one...
And when the bottom of the scrolled one leaves the top of the fixed.

Here is an example to run:

$(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');
  }

});

.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;
}

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

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

这篇关于检测固定位置的div是否跨越另一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！