小程序开发

固定顶部导航栏完整解决方案

2019-02-12 18:11

不少朋友想修改成新浪微博那种固定在浏览器窗口顶部的样子,其实很简单。

第一步,固定顶部导航栏

其实只需要给导航栏的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;}


固定顶部导航栏完整解决方案

更多实用jquery代码,请关注思捷智联官方网站http://webbj.cn/


 

免责声明:我司网站转载此文,不代表本网的观点和立场。不以盈利为目的,如有侵犯公司或个人权益,我司会第一时间删除文章。
小程序开发:webbj.cn北京小程序开发公司,免费获取思维导图!
    相关阅读
  • 固定顶部导航栏完整解决方案
    固定顶部导航栏完整解决方案

    不少朋友想修改成新浪微博那种固定在浏览器窗口顶部的样子,其实很简单。 第一步,固定顶部导航栏 其实只需要给导航栏的div增加一个position属性,编辑/theme/sample-blue/base.css文件,在...

  • 浅谈北京网站建设的基本流程及注意事项
    浅谈北京网站建设的基本流程及注意事项

    对于网站大家即熟悉又陌生,每天都在浏览各式各样的网站但却不了解一个网站是由哪些方面组成。今天我给大家分析下企业网站建设的基本流程及注意事项...

  • 企业网站建设应因势利导,顺势才能成功
    企业网站建设应因势利导,顺势才能成功

    小米手机雷军有一句至理名言站在风口,就是一头猪也可以飞翔,其意指做事情一定要顺势而为。企业网站建设和网站运营其实也是一样的道理,纵观现在几大火爆的互联网产品,哪一...

  • 企业网站建设-你需要了解的28件事情
    企业网站建设-你需要了解的28件事情

    关于 企业网站建设 的28条注意事项 1、 网页独立开发还是按模板套 套模板的网站现在很多,都是千篇一律的,很不利于搜索引擎收录。 2、 虚拟空间要品牌的 最主要的就是挑个正规的...

感受专业服务,从来电咨询开始
010-6975976518611391767
在线咨询在线咨询