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 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 兼容代码来自:,小编已经良久没有利用ie6了,所以这一部门没有实测。

ThinkSAAS开源社区 v2.3下载

ThinkSAAS 牢固顶部导航栏完整治理方案

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/9954.html