当前位置: 首页 > news >正文

css固定元素位置(fixed)

为什么80%的码农都做不了架构师?>>>   hot3.png

我们经常碰到的需求是希望页面某个元素固定在浏览器的一个位置,无论如何滚动滚动条,位置不变,就例如经常看到的弹出广告。方法一般是使用js控制,或者使用css。这里我写的是css的控制方法。

在IE7以上版本及firefox、opera、safari里,都支持css属性"position:fixed",它的作用就是将元素相对于窗口固定位置。代码如下

#ads{
    position:fixed;
    right:0;
    bottom:0;
    border:1px solid red;
    width:300px;
    height:250px;
}

我们定义一个#ads的id样式,并给他设了高度宽度,通过position:fixed以及right、bottom将元素定位在窗口右下角。

但是在IE6下,并不支持position:fixed属性,这个时候我们需要对IE6进行hack处理。解决的方案是使用postion:absolute属性,它的作用大家都很熟悉,相对于父元素进行绝对定位,然后我们可以通过expression来改变#ads的top值。

PS expression的定义:IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javas cript表达式关联起来,这里的CSS属性可以是元素固有的属性,也可以是自定义属性。就是说CSS属性后面可以是一段Javas cript表达式,CSS属性的值等于Javas cript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法,也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。

所以我们可以通过在css里计算javascript值来改变top值,代码如下:

#ads{
    _position:absolute;
    _top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);
}
似乎一切都完美了,但是我们在IE6下运行的时候会发现,随着滚动条的移动,我们的这个#ads朋友他会抖动。解决方法也很简单,只要在body里加一点点的css,如下:

body{
    background-image:url(about:blank); /* for IE6 */ 
    background-attachment:fixed; /*必须*/
}

好啦,完工!!!!!!!!!!!!!!!!!!!!!!!!

有木有!!!!!!!!!!!!!!!!!!!!!!!!

PS:原本使用的是"url(text.txt)",但是txt这个是不存在的,http请求报404错误,导致影响加载速度,参考了网上的一些写法,使用about:blank可以达到相同目的。

原理据说是ie6不支持fixed 而其样式背景却支持fixed,通过背景来此消彼长消除抖动,望大牛指教。

完整的代码:

body{
    background-image:url(about:blank); /* for IE6 */ 
    background-attachment:fixed; /*必须*/
}
#ads{
    width:300px;
    height:250px;
    position:fixed;
    right:0;
    bottom:0;
    _position:absolute;
    _top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);
    border:1px solid red;
}

转载于:https://my.oschina.net/i33/blog/87245

相关文章:

  • 解决一个String转为integer的小例子
  • poj 1151 Atlantis(离散+线段树)
  • 表白程序(IT男专用)
  • 对列表自定义去重
  • Java程序员从笨鸟到菜鸟之(一百零五)java操作office和pdf文件(三)利用jxl实现数据导出excel报表以及与POI的区别...
  • 理解Java的代理很有帮助
  • c# webbrowser请求的资源在使用中 异常
  • fedora17升级内核到linux 3.6.6
  • 英伟达 GPUDirect™ | CUDA ZONE
  • 国家气象局提供
  • JavaScript string 的replace
  • MD5 加密
  • 虚拟列
  • HPUX MC/SG RAC环境下 删除、新增lv
  • 图解CSRF安全漏洞
  • 【node学习】协程
  • 2017 前端面试准备 - 收藏集 - 掘金
  • angular学习第一篇-----环境搭建
  • AzureCon上微软宣布了哪些容器相关的重磅消息
  • Bootstrap JS插件Alert源码分析
  • C++回声服务器_9-epoll边缘触发模式版本服务器
  • Consul Config 使用Git做版本控制的实现
  • Cookie 在前端中的实践
  • Docker 1.12实践:Docker Service、Stack与分布式应用捆绑包
  • iBatis和MyBatis在使用ResultMap对应关系时的区别
  • Java多态
  • node学习系列之简单文件上传
  • Redis中的lru算法实现
  • RxJS: 简单入门
  • Spring-boot 启动时碰到的错误
  • windows下mongoDB的环境配置
  • -- 查询加强-- 使用如何where子句进行筛选,% _ like的使用
  • 从零到一:用Phaser.js写意地开发小游戏(Chapter 3 - 加载游戏资源)
  • 开源中国专访:Chameleon原理首发,其它跨多端统一框架都是假的?
  • 前端学习笔记之观察者模式
  • 全栈开发——Linux
  • 使用Swoole加速Laravel(正式环境中)
  • 详解移动APP与web APP的区别
  • 小程序开发之路(一)
  • 鱼骨图 - 如何绘制?
  • 中国人寿如何基于容器搭建金融PaaS云平台
  • 国内唯一,阿里云入选全球区块链云服务报告,领先AWS、Google ...
  • 专访Pony.ai 楼天城:自动驾驶已经走过了“从0到1”,“规模”是行业的分水岭| 自动驾驶这十年 ...
  • ​​​​​​​sokit v1.3抓手机应用socket数据包: Socket是传输控制层协议,WebSocket是应用层协议。
  • !!【OpenCV学习】计算两幅图像的重叠区域
  • (阿里云万网)-域名注册购买实名流程
  • (二)七种元启发算法(DBO、LO、SWO、COA、LSO、KOA、GRO)求解无人机路径规划MATLAB
  • (附源码)计算机毕业设计SSM教师教学质量评价系统
  • (论文阅读40-45)图像描述1
  • (南京观海微电子)——COF介绍
  • (强烈推荐)移动端音视频从零到上手(上)
  • (四)库存超卖案例实战——优化redis分布式锁
  • (转载)CentOS查看系统信息|CentOS查看命令
  • ***利用Ms05002溢出找“肉鸡
  • .gitignore文件设置了忽略但不生效