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会离开屏幕，然后我会看到没有日期信息的图表。我想保持#chart-title仅在#charts可见时才可见。

感谢您的帮助，赫。

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>

感谢您的帮助。

仅当第二个div在视图中时，滚动时才保持div可见

1 个答案: