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

Question

this is what I have so far: 这是我到目前为止所拥有的：

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

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

So basically, I am trying to figure out when you scroll to the top of a div it will hide the navigation bar. 所以基本上，我试图弄清楚当您滚动到div的顶部时，它将隐藏导航栏。 So you could read the div without the navigation bar over it. 因此，您可以在没有导航栏的情况下阅读div。 Any ideas? 有任何想法吗？ Thanks. 谢谢。

Here's my JSFiddle: https://jsfiddle.net/qb15p5g7/3/ 这是我的JSFiddle： https ://jsfiddle.net/qb15p5g7/3/

Answer 1

You need to use jquery's window scroll function and not each function unless you are going to have more than one section that you need to hide the navigation on there is no reason to use each and I'm assuming that you don't because you are using an id for #main and Id's are supposed to be unique. 您需要使用jquery的窗口滚动功能，而不是每个函数，除非您需要隐藏多个导航栏，并且没有必要使用每个导航栏，并且我假设您不需要，因为您是为#main和ID使用ID应该是唯一的。 Also you don't need to add more than one class you can just add the class and remove the class. 同样，您不需要添加多个类，只需添加类并删除该类即可。 So if im correct in assuming that you don't have more than one section that you need to hide the nav in multiple instances on your page then your code should look something like this: 因此，如果在假设您没有一个以上的部分不正确的情况下需要在页面上的多个实例中隐藏导航，那么您的代码应如下所示：

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

And you will just add the nav-hide class and then remove it when scrolling back up. 您将只添加nav-hide类，然后在向上滚动时将其删除。

Here is a fiddle of this working JSFiddle Demo 这是此正在运行的JSFiddle演示的小提琴

I assume this is what you are looking for if not let me know so I can edit my answer. 如果没有让我知道，我认为这就是您要寻找的东西，因此我可以编辑我的答案。

Answer 2

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

 #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%); }

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

do u need something like this?@Steboney 你需要这样的东西吗？@Steboney

Answer 3

The $(window).scroll() method executes on scroll change of the window. $(window).scroll()方法在窗口滚动更改时执行。 You can use it to hide your #navigation id selector 您可以使用它来隐藏您的#navigation id选择器

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

JSFiddle here JSFiddle 在这里

See the jQuery documentation for .scroll() here 在这里查看jQuery文档的.scroll（）

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

问题描述

3 个解决方案

解决方案1
1 已采纳 2016-03-25 04:24:03

解决方案2
1 2016-03-25 10:58:32

解决方案3
0 2016-03-25 02:20:42

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

问题描述

3 个解决方案

解决方案1 1 已采纳 2016-03-25 04:24:03

解决方案2 1 2016-03-25 10:58:32

解决方案3 0 2016-03-25 02:20:42

解决方案1
1 已采纳 2016-03-25 04:24:03

解决方案2
1 2016-03-25 10:58:32

解决方案3
0 2016-03-25 02:20:42