ThinkSAAS 固定顶部导航栏完整解决方案 1.docx

ThinkSAAS 固定顶部导航栏完整解决方案_1ThinkSAAS固定顶部导航栏完整解决方案 ThinkSAAS默认模板下,顶部导航栏都是随页面滚动的,不少朋友想修改成新浪微博那种固定在浏览器窗口顶部的样子,其实很简单。第一步,固定顶部导航栏其实只需要给导航栏的div增加一个position属性,编辑/theme/sample-blue/,{} 加入 position:fixed;z-index:; position实现了固定,z-index使导航栏不至于被其它页面元素遮挡。这个步骤实现了基本需求,顶部导航固定在浏览器窗口顶部了。第二步,细节调整完成上一步后,你也许很快就发现,app导航栏会被顶部导航遮挡,所以还需要再调整下方div的位置或者边距,我的方法给appnav这个div增加padding,,{} 增加 padding:40px0px0px0px; 这样就解决了app导航栏就不会再被遮挡了,但是未登录前的首页会存在问题,因为未登录前的首页是没有appnav这个div的,我的解决办法是在header之后增加名appnva的空白div,编辑/app/home/html/,在{phpdoAction('home_index_css')} 之后添加第三步,注意ie6的兼容性完成上一步后应该没什么大问题了,但是小编听说ie6根本不支持position:fixed,如果在意ie6用户的话,那可能还有一些工作需要做。 IE6以上版本的IE浏览器及其他主流浏览器都是支持“position:fixed”的,但是IE6却不支持它。幸好,IE6支持“position:absolute”Explorer的CSS表达式(expression)。所以,对于别的浏览器,我们可以用“position:fixed”进行固定定位,而对于IE6,我们可以用“position:absolute”和CSS表达式,比如: .header{ /*对于其他浏览器*/ position:fixed; top:0p