您当前的位置: 首页 > 前端教程 > CSS教程 > css position:fixed;固定元素位置(fixed)

css position:fixed;固定元素位置(fixed)

作者:xiaoxiao 来源:未知 发布时间: 2014-07-25 17:55 点击: 次
我们经常碰到的需求是希望页面某个元素固定在浏览器的一个位置,无论如何滚动滚动条,位置不变,就例如经常看到的弹出广告。方法一般是使用js控制,或者使用css。这里我写的是css的控制方法。 在IE7以上版本及firefox、opera、safari里,都支持css属性position:fixed,

css position:fixed;固定元素位置(fixed)

  我们经常碰到的需求是希望页面某个元素固定在浏览器的一个位置,无论如何滚动滚动条,位置不变,就例如经常看到的弹出广告。方法一般是使用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;

  }
分享到:
本文"css position:fixed;固定元素位置(fixed)"由远航站长收集整理而来,仅供大家学习与参考使用。更多免费得5元微信现金红包制作教程尽在远航站长站。
顶一下
(0)
0%
踩一下
(0)
0%
[点击 次] [返回上一页] [打印]
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 密码: 验证码:
关于本站 - 联系我们 - 广告合作 - 免费得5元微信现金红包声明 - 友情连接- 免费得5元微信现金红包地图 - 站点地图 - 返回顶部
Copyright ? 2007-2013 www.yhzhan.com(远航站长). All Rights Reserved .
远航站长:为中小站长提供最佳的学习与交流平台,提供网页制作与免费得5元微信现金红包编程等各类免费得5元微信现金红包制作教程.
官方QQ:445490277 免费得5元微信现金红包群:26680406 免费得5元微信现金红包备案号:豫ICP备07500620号-4