滾動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