滚动时根据其他元素显示/隐藏（切换）固定元素？(Show/Hide (Toggle) a Fixed Element Depending on Other Elements When Scrolling?)

 是否有一种方法可以在显示和隐藏固定元素时根据它在垂直滚动时传递的元素进行切换？ 
 
 以下是我期望实现的视觉参考： 
 
  
 
 我更喜欢这个功能来检测页面上固定元素的位置，而不是窗口的滚动位置。 
 
 希望照片足够说明问题; 否则，请查看下面的代码片段： 
 
 
 
 
 
  
$(document).ready(function() {
  var $window = $(window);
  var div2 = $('#div2');
  var div1 = $('#div1');
  var div1_top = div1.offset().top;
  var div1_height = div1.height();
  var div1_bottom = div1_top + div1_height;
  console.log(div1_bottom);
  $window.on('scroll', function() {
    var scrollTop = document.documentElement.scrollTop;
    var viewport_height = $window.height();
    var scrollTop_bottom = scrollTop + viewport_height;
    div2.toggleClass('show', scrollTop > div1_top && (scrollTop + window.innerHeight) < div1_bottom);
  });
});
 
  
body {
  background: #ccffcc;
  padding: 0;
  margin: 0;
  border: 0;
  text-align: center;
}

#div1 {
  background: #0099ff;
  height: 1500px;
  color: #fff;
}

#div2 {
  width: 100px;
  height: 100px;
  text-align: center;
  position: fixed;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #ffff00;
  color: #000;
  display: none;
}

#div2.show {
  display: block;
}

#div3 {
  height: 1500px;
  color: #000;
}
 
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<br>
<br>
<br>
<br>
<br> Scroll area before <b>div1</b> appears
<br>
<br>
<br>
<br>
<br>
<br>
<div id="div1">
  <div id="div2">This is <b>div2</b></div>
  This is <b>div1</b>
  <br>
  <i>(Toggle show/hide <b>div2</b> when the top of <b>div2</b> passes the top of <b>div1</b>)</i>
</div>
<div id="div3">
  This is <b>div3</b>
  <br>
  <i>(Toggle show/hide <b>div2</b> when the bottom of <b>div2</b> reaches the top of <b>div3</b>)</i>
</div>
 
 
 
 

Is there a way to toggle between showing and hiding a fixed element based on the elements it passes when scrolling vertically?
 
Here is a visual reference of what I'm looking to achieve:
 
 
I would prefer for this to function to detect the fixed element's position on a page, rather than the window's scroll position.
 
Hopefully the photo is explanatory enough; otherwise, please check the snippet below:
 
 
 
 
 
  
$(document).ready(function() {
  var $window = $(window);
  var div2 = $('#div2');
  var div1 = $('#div1');
  var div1_top = div1.offset().top;
  var div1_height = div1.height();
  var div1_bottom = div1_top + div1_height;
  console.log(div1_bottom);
  $window.on('scroll', function() {
    var scrollTop = document.documentElement.scrollTop;
    var viewport_height = $window.height();
    var scrollTop_bottom = scrollTop + viewport_height;
    div2.toggleClass('show', scrollTop > div1_top && (scrollTop + window.innerHeight) < div1_bottom);
  });
});
 
  
body {
  background: #ccffcc;
  padding: 0;
  margin: 0;
  border: 0;
  text-align: center;
}

#div1 {
  background: #0099ff;
  height: 1500px;
  color: #fff;
}

#div2 {
  width: 100px;
  height: 100px;
  text-align: center;
  position: fixed;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #ffff00;
  color: #000;
  display: none;
}

#div2.show {
  display: block;
}

#div3 {
  height: 1500px;
  color: #000;
}
 
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<br>
<br>
<br>
<br>
<br> Scroll area before <b>div1</b> appears
<br>
<br>
<br>
<br>
<br>
<br>
<div id="div1">
  <div id="div2">This is <b>div2</b></div>
  This is <b>div1</b>
  <br>
  <i>(Toggle show/hide <b>div2</b> when the top of <b>div2</b> passes the top of <b>div1</b>)</i>
</div>
<div id="div3">
  This is <b>div3</b>
  <br>
  <i>(Toggle show/hide <b>div2</b> when the bottom of <b>div2</b> reaches the top of <b>div3</b>)</i>
</div>
 
 
 
 

原文：https://stackoverflow.com/questions/50710816