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/

Answer 2

效果的当前结果是什么？

只是一个友好的提醒：您正在使用jQuery，但您也在使用本机方法（windows.addEventListener）。避免混合并使用jQuery的滚动事件（https://api.jquery.com/scroll/）可能是一个想法。只是为了统一的代码风格。

Answer 3

也许我错过了一些东西，但根据你提供的东西，它看起来像你最初隐藏菜单（显示：无）并且仅在用户通过fadeIn滚动后显示它。所以它就像你问的那样工作。

根据您的其他评论，听起来您不想fadeIn / fadeOut，只是更改样式（边框）。如果那真的是你想要的，那么为边框定义一个类，并使用滚动位置来切换该类。

Navbar fadeIn和fadeOut

3 个答案: