javascript - 菜单要固定在滚动条的顶部

Question

我试图实现一个简单的效果，即当滚动经过某个点时将菜单粘贴到浏览器窗口的顶部，但出了点问题，菜单无法固定到顶部。从库中，我使用 jQuery 并为其制作动画。

我的代码如下:

HTML:

<nav class="animatedParent">
    <ul class="animated bounceInUp delay-750">
        <li class="animated"><a href="#">O meni</a></li>
        <li class="animated"><a href="#">Katalog</a></li>
        <li class="animated"><a href="#">Razno</a></li>
    </ul>
</nav>

CSS:

.fixedNav {
    display: block;
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba( 0, 0, 0, .8);
    height: 100px;
}

nav {
    width: 400px;
    margin:  20px auto;
}

nav ul {
    list-style: none;
}

nav ul li {
    float: left;
    overflow: auto;
    width: 130px;
}

nav ul li a {
    font-size: 35px;
    font-family: 'Indie Flower', cursive;
    color: #fff;
    cursor: pointer;
    transition: 500ms linear all;
}

nav ul li a:hover {
    color: #123456;
    transition: 500ms linear all;
}

JS(jQuery):

$(document).ready(function(){
    $("nav ul li").mouseenter(function() {
        $(this).addClass("wiggle");
    });
    $("nav ul li").mouseleave(function() {
        $(this).removeClass("wiggle");
    });

    var nav = $("nav").offsetTop();
    if($(window).scrollTop() > nav) {
        $("nav").addClass("fixedNav");
        console.log('Hello!');
    } else {
        $("nav").removeClass("fixedNav");
    }
});

Answer 1

所以首先，您只使用一次代码，即加载文档时。每次滚动文档时都需要检查，因为一旦滚动到一定量，代码就会明显被触发。

$(document).scroll(function(){
  var nav = $("nav").height();
  if($(window).scrollTop() > nav) {
    $("nav").addClass("fixedNav");
  } else {
    $("nav").removeClass("fixedNav");
  }
});

body {
background: black; 
height:700px;
}
.fixedNav {
  display: block;
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba( 0, 0, 0, .8);
  height: 100px;
}
nav {
  display: block;
height: 100px;
  width: 100%;
  margin:  20px auto;
}
nav ul {
  list-style: none;
}
nav ul li {
  float: left;
  overflow: auto;
  width: 130px;
}
nav ul li a {
  font-size: 35px;
  font-family: 'Indie Flower', cursive;
  color: #fff;
  cursor: pointer;
  transition: 500ms linear all;
}
nav ul li a:hover {
  color: #123456;
  transition: 500ms linear all;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="animatedParent nav">
      <ul class="animated bounceInUp delay-750">
        <li class="animated"><a href="#">O meni</a></li>
        <li class="animated"><a href="#">Katalog</a></li>
        <li class="animated"><a href="#">Razno</a></li>
      </ul>
    </nav>