javascript - 我无法调整固定位置

Question

我想做的是，当用户向下浏览页面时，导航栏的位置是固定的。我改变位置 jquery 或 css 但问题是。

网站上的第一个版本:

当用户向下浏览页面时:

我想固定在页面顶部。感谢您的帮助。

nav css: `
img#logo {width:auto;height:72px;  position:absolute;margin-left:90px; }
div#nav {width:1930px;height:72px;border:2px solid #333;}
div#nav ul { list-style-type:none; }
div#nav ul li {float:left;}
div#nav ul#menu1 li a {font:20px Arial, Helvetica, sans-serif; padding:160px; color:#333;line-height:72px;}
div#nav ul#menu2 li a {font:20px Arial, Helvetica, sans-serif;padding:160px;margin-left:160px; color:#333; line-height:72px;}`

j查询:

 $(window).scroll(function(e)
    {
        var location = $(window).scrollTop();
        if(location>=$('div#nav').offset().top)
        {
            $('div#nav').css({'position':'fixed'});
        }
    });

Answer 1

我喜欢用https://fixedposition.googlecode.com/files/jquery.fixedposition.1.0.0-min.js为此目的，因为这很容易而且很好。

首先在您网站的 header 中包含 .js 文件，然后使用以下代码:

 <script>
        $(document).scroll(function(){
            if( !$('.navbar').length ) return;

            if (!$('.navbar').attr('data-top')) {

                // If already fixed, then do nothing
                if ($('.navbar').hasClass('navbar-fixed')) return;

                // Remember top position
                var offset = $('.navbar').offset();

                $('.navbar').attr('data-top', offset.top);
            }


            if ($('.navbar').attr('data-top') <= $(this).scrollTop()) {
                $('body').addClass('subnav-active');
                $('.navbar').addClass('navbar-fixed');
                $('#navbarStyleHolder').css("display", "block");
            }

            else {
                $('body').removeClass('subnav-active');
                $('.navbar').removeClass('navbar-fixed');
                $('#navbarStyleHoler').css("display", "none");
            }
        });
    </script>

接下来继续将 .navbar 替换为您的导航所在的 div，然后创建一个 .css 类，其中包含您的固定 header 应具有的格式(在我的示例代码中称为 .navbar-fixed )。

当到达 .navbar div 的末尾时，此脚本将自动用 .navbar-fixed 类替换 .navbar 类。

例如，如果您想将它放在屏幕顶部，请使用此 css 代码:

.navbar-fixed {
position:fixed;
top:1;
}