仅在第二个div处于可见状态时滚动时保持div可见

Question

我有以下（简化的）HTML代码：

<div>
..stuff...
</div>
<div class="subtitle" id="charts-title">
    <h3>Charts for d/m/y</h3>
</div>
<div class="content" id="charts">
    ...various charts...
</div>
<div>
...more stuff...
</div>

因此，＃charts-title不在页面顶部，＃charts也不在页面底部，它们位于页面中间。 现在，当用户向下滚动时，＃charts-title将从屏幕上消失，然后我看到没有日期信息的图表。 我想仅在查看#charts时使＃charts-title可见。

感谢您的帮助，赫克托。

Answer 1

这样：

<div>
..stuff...
</div>
<div class="subtitle" id="float-charts-title" style="display:none; position:fixed; top: 0; z-index:100; background-color:white">
    <h3>Charts for d/m/y</h3>
</div>
<div class="subtitle" id="charts-title">
    <h3>Charts for d/m/y</h3>
</div>
<div class="content" id="charts">
    ...various charts...
</div>
<div>
...more stuff...
</div>

<script>
  $(window).scroll(function(){
  var rectTitle = $("#charts-title")[0].getBoundingClientRect();
  var rectCharts = $("#charts")[0].getBoundingClientRect();
  if (rectTitle.bottom < 0 && rectCharts.bottom > 0) {
    $("#float-charts-title").css("display", "block");
  } else {
    $("#float-charts-title").css("display", "none");
  }
});
</script>

谢谢您的帮助。