我试图让我的导航粘性。但没有工作..这是我的JQuery代码:
$(document).ready(function() {
var stickyNavTop = $('nav').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
以及使用的 CSS 定义:
.sticky {
position: fixed;
top: 0;
}
nav {
background: url('bilder/bg_nav.png') no-repeat;
width: 800px;
margin: 0 auto;
height: 40px;
}
您可以在链接上查看所有内容
谢谢你的帮助!
我没有在你的html中找到jQuery库,你应该把这个片段放在你的html的<head>
部分,让你的jQuery代码工作:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
你还需要包含jquery框架,即 http://code.jquery.com/jquery-2.0.3.js
我这里有一个例子供你效仿。
http://jsfiddle.net/