Question

我试图让导航更改为黑色标题下方的position: fixed。我非常确定JavaScript需要进行一些调整，但我不知道此时该怎么做。

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

你很亲密，但有几个问题。

首先，您不希望将滚动事件绑定到导航，因为导航不滚动;窗户是。所以你需要将scroll事件绑定到窗口。然后，您需要使用$(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

滚动X量时，将导航更改为“position：fixed”

2 个答案: