JQuery 导航粘性



我试图让我的导航粘性。但没有工作..这是我的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/

相关内容

  • 没有找到相关文章

最新更新