javascript - 在滚动和类调用时显示 div

Question

我有一个单页应用程序，它有 2 个 sidenavs(nav1 和 nav2)和 2 个不同的 div 内容。现在我想做的是当我向下滚动并到达 class="content2" 所在的位置时，id="nav2" 将显示。然后，如果我向上滚动到 class="content1" 所在的位置，则 id="nav1" 将显示。默认情况下应显示 nav1。

这里有一些图片可以稍微理解问题

这是一张我在 content1 中的图片。

在 content2 中

这是一个示例 html fiddle .

Answer 1

您可以使用 $(document).scroll(function() 检测文档滚动位置的变化。scrollTop() 方法将给出当前顶部文档的位置和 position() 是返回包含位置值的对象的方法，而 top 是我们在我们的例子中想要的。我们只想比较当前文档的顶部位置和 div 顶部位置。

if($(this).scrollTop()>=$('.content2').position().top){ 这意味着当前文档位置在顶部位置类名 .content2 的 div。现在我们可以显示 nav2 并隐藏 nav1。否则显示 nav1 并隐藏 nav2

  $(document).scroll(function() {
    if($(this).scrollTop()>=$('.content2').position().top){
      $("#nav2").show();
      $("#nav1").hide();
    }
    else {
      $("#nav1").show();
      $("#nav2").hide();
    }
  })

fiddle :https://fiddle.jshell.net/tintucraju/rjjrmhvt/5/

请注意:如果父级相对定位，则position().top 是从顶部到父级计算的。所以最高值会有轻微的变化。您可以通过向 $(this).scrollTop() 添加偏移量来进行调整，并调整到您想要的位置。

更新 fiddle :https://fiddle.jshell.net/tintucraju/rjjrmhvt/6/