Question

我正在努力寻找如何检测一个位置固定的div何时开始和结束以在滚动时悬停某个div。

我总是在我的窗口中固定并居中的div。当我滚动我的页面时，我希望固定div在开始悬停另一个时更改其颜色并在完成悬停后删除颜色。我附上了一个小模式来说明我的问题。要恢复：

页面加载时的固定div具有黑色 - ＆gt;开始悬停第二个div，颜色变为白色 - ＆gt;完成以悬停第二个div，颜色恢复为黑色。

我发现了这个问题：Detect when a position: fixed; element crosses over another element

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

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

提前感谢您的帮助。

View image

Answer 1

你必须考虑到div高度。

有两个＆＃34;时刻＆＃34;计算，进入和离开。

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

以下是运行示例：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

谢谢。我对其进行了一些修改，使其适用于多个div-to-cross元素。当它与带有白色背景的div重叠时，我用它来更改固定的白色汉堡菜单。然后它变成另一种颜色，直到离开白色背景div。

//Burger Scroll Change Color
$(window).scroll(function(){
    var fixed = $("div.fixed");

    var fixed_position = $("div.fixed").offset().top;
    var fixed_height = $("div.fixed").height();

    var addClass = false;
    $('.div-to-cross').each(function(){

        var toCross_position = $(this).offset().top;
        var toCross_height = $(this).height();

        if (fixed_position + fixed_height  < toCross_position) {
            //fixed.removeClass('white');
        } else if (fixed_position > toCross_position + toCross_height) {
            //fixed.removeClass('white');
        } else {
            addClass = true;
        }
    });
    if(addClass == true){
        fixed.addClass('change-color');
    }else{
        fixed.removeClass('change-color');
    }
});

检测具有固定位置的div何时越过另一个元素

2 个答案: