• 售前

  • 售后

热门帖子
入门百科

详解IE6中的position:fixed问题与随滚动条滚动的效果

[复制链接]
Gordon520 显示全部楼层 发表于 2021-8-16 12:23:58 |阅读模式 打印 上一主题 下一主题
详解IE6中的position:fixed标题与随滚动条滚动的结果
前言:
在《【jQuery】兼容IE6的滚动监听》(点击打开链接)提及到办理IE6fixed标题,具体是要引入一个js文件,还要声明一条脚本就为这个div声明fixed定位去办理,起始如许很欠好啊。引入的Javascript欠好管理之余,还要在head声明引入javascript,之后又要给这个div声明一个id,之后又要在脚本出弄一条声明,着实是烦死了。

使用position:fixed无非是想做出如下的结果。

根本上position:fixed是在IE7以上的所有欣赏器都是没有标题的:

IE8:

野狐禅FireFox:

然而由于IE6中直接就没有position:fixed属性,要做出如下的结果:

只能使用position: absolute;加一段在css样式中实行的javascript脚本去办理。
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3.   <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.     <title>Untitled Document</title>
  6.     <style type="text/css">     
  7.       .fixedbox {
  8.         background: #69C;
  9.         height: 60px;
  10.         width: 100px;         
  11.         position: fixed;
  12.         bottom: 100px;
  13.         /*IE6实现position: fixed;*/
  14.         /*等价于position: fixed;虽然代码好长,但是根本就不用管*/
  15.         _position: absolute;         
  16.         _top: expression(eval(
  17.         document.documentElement.scrollTop + document.documentElement.clientHeight-this.offsetHeight-
  18.         (parseInt(this.currentStyle.marginTop,10)||0)-
  19.         (parseInt(this.currentStyle.marginBottom,10)||0)));
  20.         /*等价于position: fixed;虽然代码好长,但是根本就不用管*/
  21.         _margin-bottom:100px;/*设置位置,不要用bottom,而是改用margin-bottom,margin-xx来实现*/
  22.       }
  23.     </style>
  24.   </head>
  25.   <body>
  26.     <div style="float:left;width:80%;min-height:100px;">
  27.       <p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p>
  28.       <p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p>
  29.       <p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p>
  30.       <p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p>   
  31.     </div>
  32.     <div style="float:left;width:20%;min-height:100px;"><div class="fixedbox"></div></div>
  33.     <div style="clear:both"></div>     
  34.   </body>
  35. </html>
复制代码
上述代码,对于IE6的样式,前面都加上了_,_的部门是IE6特定的重写样式声明,具体见《【CSS】关于CSS样式中的!important、*、_符号》(点击打开链接)

而现实上,在IE6中,以下的CSS:
  1. .fixed{
  2.   position: absolute;        
  3.   top: expression(eval(
  4.     document.documentElement.scrollTop + document.documentElement.clientHeight-this.offsetHeight-
  5.     (parseInt(this.currentStyle.marginTop,10)||0)-
  6.     (parseInt(this.currentStyle.marginBottom,10)||0)));
  7. }
复制代码
等价于其它欣赏器的:
  1. .fixed{
  2.   position: fixed;
  3. }
复制代码
固然IE6中实现position:fixed的CSS可能在某些欣赏器中不正常,因此在各个样式前面补上一条下划线_,表现仅在IE6中实行。

同时IE6应有的如上样式之后,不要像其它欣赏器用right,top,left,bottom去定位,而是用margin-bottom,margin-left,margin-right去设置被position:fixed的div的位置,

这里调节div的位置的时候还必要留意,由于上述的兼容IE6的CSS使用到top的属性,所以设置margin-top是不管用,如果你要设置这个div在浮动的时候,离欣赏器的顶部是多少的话,你应该如许写:
  1. .fixed{
  2.   /*IE6实现position: fixed;*/
  3.   _position: absolute;         
  4.   _top: expression(eval(document.documentElement.scrollTop));
  5.   _margin-top:100px;
  6. }
复制代码
这里关于_top的代码之所以短了这么多,是因为无须用document.documentElement.clientHeight来获取欣赏器表现窗口大小。

而-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)统统是为了微调更加精确,如果你不想要也可以不加,仅仅是有一点视觉结果而已。

再者,上述的代码,大家可以看到,关于fixedbox这个东西,我并没有设置其right,left,是因为,我想让其在随滚动条滚动的时候,仍旧可以大概保持父级div的float:left属性。

就是,右边的蓝色色块,与左边一大堆sss,仍旧是80%与20%的分割。
如有疑问请留言大概到本站社区互换讨论,感谢阅读,盼望能帮助到大家,谢谢大家对本站的支持!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作