| 标题 | ThinkSAAS 固定顶部导航栏完整解决方案 |
| 范文 | ThinkSAAS 默认模板下，顶部导航栏都是随页面滚动的，不少朋友想修改成新浪微博那种固定在浏览器窗口顶部的样子，其实很简单。 第一步，固定顶部导航栏 其实只需要给导航栏的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></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了，所以这一部分没有实测。 |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。