javascript - 滚动到 div 顶部时隐藏另一个 div

Question

这是我目前所拥有的:

    $("#main").each(function() {this.scrollTop = this.scrollHeight;

        if ($(this).scrollTop()>0)
         {
            $('#navigation').addClass("nav-hide");
         }
        else
         {
            $('#navigation').addClass("nav-normal");
         }
     });

所以基本上，我试图弄清楚当您滚动到 div 的顶部时它会隐藏导航栏。所以你可以在没有导航栏的情况下阅读 div。有任何想法吗？谢谢。

这是我的 JSFiddle:https://jsfiddle.net/qb15p5g7/3/

Answer 1

您需要使用 jquery 的窗口滚动功能，而不是每个功能，除非您要有多个部分需要隐藏导航，没有理由使用每个功能，我假设您不这样做因为您为#main 使用了一个 id，而 Id 应该是唯一的。此外，您不需要添加多个类，只需添加类和删除类即可。因此，如果我假设您没有超过一个部分需要在页面上的多个实例中隐藏导航是正确的，那么您的代码应该如下所示:

$(window).scroll(function() {
  if ($(this).scrollTop() >= $('#main').offset().top) {
    $('#navigation').addClass("nav-hide");
  }else {
    $('#navigation').removeClass("nav-hide");
  }
});

您只需添加 nav-hide 类，然后在向上滚动时将其删除。

这是这个工作的 fiddle JSFiddle Demo

如果不让我知道，我想这就是您正在寻找的内容，以便我可以编辑我的答案。