javascript - 滚动 X 量时将导航更改为 `position: fixed`

Question

我正在尝试让导航更改为黑色标题正下方的 position: fixed。我很确定 JavaScript 需要进行一些调整，但我不确定此时该做什么。

这是 fiddle :http://jsfiddle.net/kgnkxemd/2/

HTML

<div>
    <header></header>
    <div></div>
    <div></div>
    <ul id="site-navigation">
        <li>nav 1</li>
        <li>nav 2</li>
        <li>nav 3</li>
        <li>nav 4</li>
    </ul>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

CSS

div {
    height: 100px
}
header {
    background: #000;
    height: 60px;    
    position: fixed;
    top: 0;
    width: 100%;
}
#site-navigation {
    background: yellow;
}
#site-navigation li {
    display: inline-block;
}
#site-navigation.fix-nav {
    position: fixed;
    top: 60px;
    width: 100%;
}

JS

// Fixed nav
var nav = $("#site-navigation");

nav.on("scroll", function(e) {

  if (this.scrollTop > 60) {
    nav.addClass("fix-nav");
  } else {
    nav.removeClass("fix-nav");
  }

});

Answer 1

你很接近，但有几个问题。

首先，您不想将滚动事件绑定(bind)到导航，因为导航不滚动；窗口是。所以需要给窗口绑定(bind)滚动事件。然后您需要使用 $(window).scrollTop()(或 $(this).scrollTop() inside the scroll event)检查窗口的滚动位置

$(window).on("scroll", function(e) {
  if ( $(this).scrollTop() > 60 ) {
    nav.addClass("fix-nav");
  } else {
    nav.removeClass("fix-nav");
  }
});

进行这些更改会导致:http://jsfiddle.net/kgnkxemd/3/