滚动X量时将导航更改为“位置：固定”

Question

我正在尝试将导航更改为position: fixed在黑色标题的正下方。 我很确定JavaScript需要进行一些调整，但是目前还不确定该怎么做。

这是小提琴： 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

您接近了，但是有几个问题。

首先，您不希望将滚动事件绑定到导航，因为导航不会滚动。 窗户是。 因此，您需要将滚动事件绑定到窗口。 然后，您需要使用$(window).scrollTop() （或滚动事件中的$(this).scrollTop()检查窗口的滚动位置。

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

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

Answer 2

scrolltop()是函数而不是属性。 如下更新脚本。

 jQuery(document).ready(function($){
 var nav = $("#site-navigation");
  $(document).on("scroll", function(e) {
    if ($(document).scrollTop() > 60) {
      nav.addClass("fix-nav");
     } else {
     nav.removeClass("fix-nav");
    }     
  });    
});

DEMO