固定顶部导航栏完整解决方案
2013-03-20 10:00
423 查看
不少朋友想修改成新浪微博那种固定在浏览器窗口顶部的样子,其实很简单。
第一步,固定顶部导航栏
其实只需要给导航栏的div增加一个position属性,编辑/theme/sample-blue/base.css文件,在
加入
position实现了固定,z-index 使导航栏不至于被其它页面元素遮挡。这个步骤实现了基本需求,顶部导航固定在浏览器窗口顶部了。
第二步,细节调整
完成上一步后,你也许很快就发现,app导航栏会被顶部导航遮挡,所以还需要再调整下方div的位置或者边距,我的方法给appnav这个div增加padding,所以编辑base.css文件,在
增加
这样就解决了app导航栏就不会再被遮挡了,但是未登录前的首页会存在问题,因为未登录前的首页是没有appnav这个div的,我的解决办法是在header之后增加名appnva的空白div,编辑/app/home/html/index.html,在
之后添加
第三步,注意ie6的兼容性
完成上一步后应该没什么大问题了,但是小编听说ie6 根本不支持position:fixed,如果在意ie6用户的话,那可能还有一些工作需要做。
IE6以上版本的IE浏览器及其他主流浏览器都是支持“position:fixed”的,但是IE6却不支持它。幸好,IE6 支持“position:absolute” 和 Internet Explorer 的CSS表达式(expression)。所以,对于别的浏览器,我们可以用“position:fixed” 进行固定定位,而对于IE6,我们可以用“position:absolute” 和CSS表达式,比如:
采用以上代码,顶部的导航条,在IE6情况下,确实固定在顶部了,但是,拉动垂直滚动条时,这个导航条有跳动现象,解决此问题的方法是使用“background-attachment:fixed”为body添加一个背景图片,强制页面在重画之前先处理CSS,而且这个图片可以是虚拟的,比如“background:url(任意名称)”。
ie6 兼容代码来自:http://jdm.jimdo.com/2012/01/24/topnav/,小编已经好久没有使用ie6了,所以这一部分没有实测。
第一步,固定顶部导航栏
其实只需要给导航栏的div增加一个position属性,编辑/theme/sample-blue/base.css文件,在
.header{}
加入
position: fixed;z-index:999999;
position实现了固定,z-index 使导航栏不至于被其它页面元素遮挡。这个步骤实现了基本需求,顶部导航固定在浏览器窗口顶部了。
第二步,细节调整
完成上一步后,你也许很快就发现,app导航栏会被顶部导航遮挡,所以还需要再调整下方div的位置或者边距,我的方法给appnav这个div增加padding,所以编辑base.css文件,在
.appnav{}
增加
padding:40px 0px 0px 0px;
这样就解决了app导航栏就不会再被遮挡了,但是未登录前的首页会存在问题,因为未登录前的首页是没有appnav这个div的,我的解决办法是在header之后增加名appnva的空白div,编辑/app/home/html/index.html,在
{php doAction('home_index_css')}
之后添加
<div class="clear"></div>
第三步,注意ie6的兼容性
完成上一步后应该没什么大问题了,但是小编听说ie6 根本不支持position:fixed,如果在意ie6用户的话,那可能还有一些工作需要做。
IE6以上版本的IE浏览器及其他主流浏览器都是支持“position:fixed”的,但是IE6却不支持它。幸好,IE6 支持“position:absolute” 和 Internet Explorer 的CSS表达式(expression)。所以,对于别的浏览器,我们可以用“position:fixed” 进行固定定位,而对于IE6,我们可以用“position:absolute” 和CSS表达式,比如:
.header{ /* 对于其他浏览器 */ position:fixed; top:0px; /* 对于 IE6 */ _position: absolute; _top: expression(documentElement.scrollTop + "px"); }
采用以上代码,顶部的导航条,在IE6情况下,确实固定在顶部了,但是,拉动垂直滚动条时,这个导航条有跳动现象,解决此问题的方法是使用“background-attachment:fixed”为body添加一个背景图片,强制页面在重画之前先处理CSS,而且这个图片可以是虚拟的,比如“background:url(任意名称)”。
body {background: url(about:blank); background-attachment: fixed;}
ie6 兼容代码来自:http://jdm.jimdo.com/2012/01/24/topnav/,小编已经好久没有使用ie6了,所以这一部分没有实测。
相关文章推荐
- 使用Jquery实现顶部导航栏在页面滑动到自身所在位置之后固定在顶部的效果
- 使用Jquery实现顶部导航栏在页面滑动到自身所在位置之后固定在顶部的效果
- 导航栏滚动到顶部后固定
- 如何将导航栏始终固定在窗口顶部:
- 导航栏固定在顶部,滑动下面内容,不同的内容块,上面的导航相应的变颜色
- 导航栏滚动到顶部后固定
- 导航栏固定 和 回到顶部 防抖动兼容ie6
- 移动端常见随屏幕滑动顶部固定导航栏背景色透明度变化简单jquery特效
- 将导航栏始终固定在窗口顶部:
- 导航栏滚到顶部固定
- 怎么将导航栏始终固定在窗口顶部
- 基于Bootstrap的标准的固定在顶部的导航栏
- 怎么将导航栏始终固定在窗口顶部,类似bootstrap 的navbar-fixed-top
- JS滚动到指定位置导航栏固定顶部
- 页面顶部固定漂浮导航栏,漂浮div,div背景透明
- 页面滚动到指定位置导航栏固定顶部
- 滚动页面, 顶部导航栏固定效果
- 将导航栏固定在窗口的顶部
- 当导航栏滚动到浏览器顶部时,固定导航栏
- 垂直滚动条滑到页面里面的导航栏时,导航栏固定到窗口顶部