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类，然后在向上滚动时将其删除。

这是这个工作JSFiddle Demo

的小提琴

如果不让我知道，我认为这就是你要找的东西，所以我可以编辑我的答案。

Answer 2

＆＃13;

function scrollpos() {
    if (window.scrollY<document.getElementById('header').clientHeight)    {
    document.getElementById('navigation').style.display = 'block';
} else {
    document.getElementById('navigation').style.display = 'none';
}
}

＆＃13;

#navigation {
        width: 100%;
        height: 50px;
        background-color: #586e75;
        position: fixed;
        z-index: 1000;
        transition: transform 200ms ease;
    }
    
    header,
    section {
        height: 100vh;
        width: 100%;
        position: static;
    }
    
    header {
        background: #4f4244;
    }
    
    section {
        background: #222222;
    }
    
    .nav-normal {
        transform: translateY(0%);
    }
    
    .nav-hide {
        transform: translateY(-100%);
    }

＆＃13;

<body onscroll="scrollpos()">
        <div id="navigation"></div>
        <header id="header"></header>
        <section id="main"></section>
</body>

＆＃13;

你需要这样的东西吗？@Steboney

Answer 3

$(window).scroll()方法在滚动更改窗口时执行。您可以使用它隐藏#navigation ID选择器

$(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
        $('#navigation').fadeIn();
    } else {
        $('#navigation').fadeOut();
    }
});

JSFiddle here

请参阅.scroll（）here

的jQuery文档

当滚动到div的顶部隐藏另一个div

3 个答案: