我无法调整位置固定

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;}`

jquery：

 $(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用于此目的，因为这很简单。

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

word_list

接下来，继续将 <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> 替换为导航所在的div，然后创建一个.navbar类，其中包含固定标头应具有的格式（在我的示例代码中称为{{ 1}}）。

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

例如，如果您想将其置于屏幕顶部，请使用此css代码：

.navbar-fixed