javascript - 仅当第二个 div 在 View 中时才在滚动时保持 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-title 仅在#charts 在 View 中时可见。

感谢您的帮助， 赫克托耳。

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>

感谢您的帮助。