隐藏Sticky Div一旦滚动过去的下一个父Div

Question

我试图隐藏一个“粘性”div，一旦它滚过下一个父div。我现在已成功拥有它，因此它在滚动“y＆gt; 100”后出现但是我在滚动浏览#break后让“粘滞便笺”消失时遇到了很多麻烦。

以下示例。

http://codepen.io/anon/pen/BojKBx

@"\{\[\w*\]}"
  ^ ^    ^

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 100) {
    $('.bottomMenu').fadeIn();
  } else {
    $('.bottomMenu').fadeOut();
  }

});

.bottomMenu {

  display: none;

  position: fixed;

  bottom: 0;

  width: 50%;

  height: 60px;

  border-bottom: 1px solid #000;

  z-index: 1;

  margin: 0 auto;

  left: 50%;

  margin-left: -500px;

  text-align: center;

}

#header {

  font-size: 50px;

  text-align: center;

  height: 60px;

  width: 100%;

  background-color: red;

}

#container {

  height: 2500px;

}

#break {

  text-align: center;

  font-size: 30px;

  margin-bottom: 300px;

  width: 100%;

  background-color: yellow;

}

#footer {

  height: 60px;

  background-color: red;

  width: 100%;

  bottom: 0;

}

Answer 1

您可以获得div的Y位置（从页面顶部开始的垂直偏移），然后添加条件以仅在低于所需的“Y”坐标时显示粘滞便笺，并且高于所需的div 。例： http://codepen.io/anon/pen/EVPKyP

Javascript代码：

$(document).scroll(function () {
var bodyRect = document.body.getBoundingClientRect(),
    elemRect = document.getElementById("break").getBoundingClientRect(),
    offset   = elemRect.top - bodyRect.top - window.innerHeight;
    var y = $(this).scrollTop();
    if (y > 100 && y < offset) {
        $('.bottomMenu').fadeIn();
    } else {
        $('.bottomMenu').fadeOut();
    }

});

来源：

Retrieve the position (X,Y) of an HTML element

screen width vs visible portion