如何让网页中超出浏览器范围的导航栏固定在顶端
$().ready(function(){
&&&&//导航距离屏幕顶部距离
_defautlTop =
$("#navigator").offset().//避免下面将说的情况
&&&&//导航距离屏幕左侧距离
_defautlLeft =
$("#navigator").offset().
&&&&//导航默认样式记录，还原初始样式时候需要
_position =
$("#navigator").css('position');
$("#navigator").css('top');
$("#navigator").css('left');
$("#navigator").css('z-index');
&&&&//鼠标滚动事件
&&&&$(window).scroll(function(){
&&&&&&&&if($(this).scrollTop()
& _defautlTop){
&&&&&&&&&&&&//IE6不认识position:fixed，单独用position:absolute模拟
&&&&&&&&&&&&if($.browser.msie
$.browser.version=="6.0"){
&&&&&&&&&&&&&&&&$("#top").css({'position':'absolute','top':eval_r(document.documentElement.scrollTop),'left':_defautlLeft,'z-index':99999});
&&&&&&&&&&&&&&&&//防止出现抖动
&&&&&&&&&&&&&&&&$("html,body").css({'background-image':'url(about:blank)','background-attachment':'fixed'});
&&&&&&&&&&&&}else{
&&&&&&&&&&&&&&&&$("#navigator").css({'position':'fixed','top':0,'left':_defautlLeft,'z-index':99999});
&&&&&&&&&&&&}
&&&&&&&&}else{
&&&&&&&&&&&&$("#navigator").css({'position':_position,'top':_top,'left':_left,'z-index':_zIndex});
代码如上，需要注意的一点就是，IE6不认识position:fixed，需要用position:absolute去模拟，然后实时计算出top的值，另外需要给html和body加两个样式，防止滚动的时候出现抖动。
代码中注释的地方，说的情况就是，网速慢，或者页面较长加载较慢时，不能及时获取_defautlTop的值，导致回到页头时无法归位的解决方法。
另外需要注意的一点就是，导航的宽度必须是固定值，不能是auto或者100%因为fixed和absolute都不认识，当然你也可以手动获
取到导航的宽度，然后写到浮动导航样式里，不过有个前提，导航原先样式里不能有：position:relative，情况可能比较多，最简单的方法还是
把导航宽度定死。
以上代码可以复制复制到后台设置的HTML页脚代码里，如果遇到浮动导航宽度出问题了，就参考我刚才做的处理办法解决吧。
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。浏览器缩小后，页面样式改变的问题
[问题点数：20分]
本版专家分：0
结帖率 57.14%
CSDN今日推荐
本版专家分：21087
2015年8月优秀小版主2015年5月优秀小版主2015年4月html5优秀版主
2015年7月 Web 开发大版内专家分月排行榜第三
本版专家分：21087
2015年8月优秀小版主2015年5月优秀小版主2015年4月html5优秀版主
2015年7月 Web 开发大版内专家分月排行榜第三
本版专家分：338
匿名用户不能发表回复！|
其他相关推荐如何使用jQuery让页面随着窗口大小的改变而自动加减页面的宽度？_百度知道
如何使用jQuery让页面随着窗口大小的改变而自动加减页面的宽度？
就像是用JQuery制作有动画拉动效果的下拉列表一样，当我把窗口的横向大小改变即说改变浏览器的宽度时，页面的宽度也随之改变，而改变是在模拟动画的效果，不是瞬间就变成那个指定的值！！
我有更好的答案
&style&type=&text/css&&*{margin:0;padding:0;}.div1{height:100%;margin:0&border-left:5px&solid&#F00;border-right:5px&solid&#F00;}&/style&&script&type=&text/javascript&&src=&jquery.js&&&/script&&script&type=&text/javascript&&$(function(){ $(&.div1&).css({
height:$(window).height() }); $(window).resize(function(){
$(&.div1&).stop(true,false).animate({
width:$(document).width()*0.8
},150) });&&& $(window).resize();});&/script&&div&class=&div1&&&/div&
采纳率：69%
来自团队：
$(window).size(function(){$(yourDiv).animate();});其中animate参考上一条回答
完全行不通
我们做的网页都是如此，也许你的环境特别吧。消息触发事件，事件调用函数，除此之外实在不知道还有什么途径？
为您推荐：
其他类似问题
jquery的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。360浏览器怎么设置收藏栏标题的最大宽度_百度经验
&&&&&&&&&电脑软件360浏览器怎么设置收藏栏标题的最大宽度听语音1234567
百度经验:jingyan.baidu.com360浏览器的收藏栏标题默认有一个指定的宽度，如果我们需要将指定的宽度给加长可进行设置。具体应该怎么操作呢？一起来了解下吧！百度经验:jingyan.baidu.com计算机360安全浏览器百度经验:jingyan.baidu.com11、在计算机桌面360安全浏览器程序图标上双击鼠标左键，将其打开运行。如图所示；22、在打开的浏览器界面，在收藏栏可以看到默认标题指定的宽度样式。如图所示；33、接着依次点击“收藏”下拉按钮--&“收藏栏显示设置”--&“设置标题最大宽度”选项命令。如图所示；44、点击“设置标题最大宽度”选项命令后，这个时候会打开“设置收藏标题的最大宽度”对话框，默认为“54像素”。如图所示；55、我们修改为想要显示的像素，例如“80”，在点击确定按钮。如图所示；66、点击确定之后，返回到浏览器界面，看收藏栏的显示已经有所改变。如图所示；77、如果想恢复默认设置，则在“设置收藏标题的最大宽度”对话框中点击“恢复默认”即可。如图所示；END经验内容仅供参考，如果您需解决具体问题(尤其法律、医学等领域)，建议您详细咨询相关领域专业人士。作者声明：本篇经验系本人依照真实经历原创，未经许可，谢绝转载。投票(26)已投票(26)有得(0)我有疑问(0)◆◆说说为什么给这篇经验投票吧！我为什么投票...你还可以输入500字◆◆只有签约作者及以上等级才可发有得&你还可以输入1000字◆◆如对这篇经验有疑问，可反馈给作者，经验作者会尽力为您解决！你还可以输入500字相关经验00020热门杂志第1期你不知道的iPad技巧3803次分享第1期win7电脑那些事6656次分享第2期新人玩转百度经验1418次分享第1期Win8.1实用小技巧2661次分享第1期小白装大神1941次分享◆请扫描分享到朋友圈CSS导航菜单水平居中的多种方法 | 设计达人
爱设计，爱分享。
CSS导航菜单水平居中的多种方法
赞助商链接
在网页设计中，水平导航菜单使用是十分广泛的，在CSS样式中，我们一般会用Float元素或是「display:inline-block」来解决。而今天主要讲解如何让未知宽度的元素居中，下面我们会列出几种方法来解决水平居中问题。当然这些方法不一定是用来解决导航菜单问题，还有其它类似情况也是可以使用的。
在线演示：
CSS导航菜单水平居中的多种方法：
方法1：display:inline-block
这个方法比较简单，是将容器转成「display:inline-block」行内块级元素，然后就可以直接用「text-align:center」使其达到水平居中效果。
HTML代码：
这里我们需要一个div来包围这个导航菜单。
&div class=&navbar&&
&li&&a href=&/&&首页&/a&&/li&
给外面的div添加「text-align:center」，然后将菜单容器设成「display:inline-block」行内块级元素，菜单浮左「float:left」
text-align:
.navbar ul {
display:inline-
.navbar li {
.navbar li + li {
margin-left:20
这里浏览器兼容只能是IE8或更高版本，所以如果要兼容IE7的话，请加入以下代码
.navbar ul {
方法2：position:relative
这是使用「position:relative」定位方法来让元素水平居中，我不是很推荐这方法，因为代码多了个div去包住，当然这些是根据情况来使用的。
HTML代码：
&div class=&navbar&&
&li&&a href=&/&&首页&/a&&/li&
将定位div设为浮动，再定位「left:50%」,然后导航定位至「left:-50%」，这方法很有意思吧。可能表达不是很清楚，自己看代码吧^^
.navbar & div {
.navbar ul {
left:-50%;
.navbar li {
.navbar li + li {
margin-left:20
如果要兼容IE7，请添加以下样式：
方法3：display:table
如果你喜欢简洁的代码，哪么这个方法就非常适合你了。
HTML代码：
&ul class=&navbar&&
&li&&a href=&/&&Home&/a&&/li&
.navbar li {
display:table-
.navbar li + li {
padding-left:20
浏览器兼容：这方法代码精简，但不支持IE7及以下版本……
方法4：display:inline-flex
有关flex layout的知识自己查下吧>_<
HTML代码：
&div class=&navbar&&
&li&&a href=&/&&Home&/a&&/li&
text-align:
.navbar & ul {
display:-webkit-inline-
display:-moz-inline-
display:-ms-inline-
display:-webkit-inline-
display:inline-
.navbar li + li {
margin-left:20
浏览器兼容：不支持IE7及以下版本的IE浏览器。
方法5：width:fit-content
HTML代码：
&div class=&navbar&&
&li&&a href=&/&&首页&/a&&/li&
text-align:
.navbar & ul {
display:-webkit-inline-
display:-moz-inline-
display:-ms-inline-
display:-webkit-inline-
display:inline-
.navbar li + li {
margin-left:20
浏览器兼容：这个兼容比较低，只支持Firefox或chrome、Opera 12这些较新的浏览器。
在线演示：
介绍了这么多方法，每种方法都有不同的好坏，这些视项目情况而定，对于我来说，「display:inline-block」是比较适合大众化的，因为它兼容性比较好嘛！
赞助商链接
喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。
艺术与审美入门之书
设计师必看
手机APP设计
新手推荐！
Web用户体验入门书籍
web前端&设计群