jquery - 导航栏淡入淡出

Question

我有一个没有边框的导航栏。当它在某个 Y 轴上滚动时，我想在导航栏上添加一个边框，然后返回到原始导航栏。此时，我正在使用 jQuery fadeIn 和 fadeOut，但无法使导航栏正常工作。 这是我的js。

window.addEventListener("scroll", function() {
if (window.scrollY > 500) {

    $('.nav').fadeIn('slow');
}
 else {
     $('.nav').fadeOut();
 }
},false);

这是我的 index.html

 <nav role="navigation" id="top-nav" class="navbar-fixed-top">
        <ul class="nav nav-pills" id="nav1">
            <li role ="presentation"><h1>Modern Concepts</h1>
          <li role="presentation" class="first-Anchor"><a     href="#myAnchor">Inovate</a></li>
          <li role="presentation"><a href="#myAnchorToo">Design</a></li>
          <li role="presentation"><a href="#">Build</a></li>
        </ul>
    </nav>

这是我的 CSS。

ul.nav {
    display: none;
    border: 3px solid black

Answer 1

您需要获取窗口的 pageOffset 以测试您在滚动中的位置...

window.addEventListener("scroll", function () {
    console.log(window.pageYOffset);
    if (window.pageYOffset > 500) {
      //do the magic
    } else {
      //go back to original state
    }
}, false);

这是经过许多不同调整的工作示例......祝你好运:

http://jsfiddle.net/pu1yLe4u/2/