原创、转载、经典

您当前的位置:heluyao的小站:无非不美 -> 文章中心 -> 轻描淡写 -> 文章内容

ie6玩转position:fixed(实现固定定位)

作者:heluyao    来源:本站原创    发布时间:2008-7-4 16:37:44

原理:出去网页<html>以及<body>原有的滚动条,用一个<div>模拟它。然后将要固定定位的区块置于这个模拟层之外,即可实现需要的效果。因为这时滚动条拖动的只是模拟<body>的那个层,而固定定位的这个层根本就不在这个区块内,所以就不会跟随滚动条而动。

看代码:

<style type="text/css">
html,body { margin:0; padding:0; overflow:hidden;height:100%; width:100%; text-align:left;}
.body { position:relative; width:100%; height:100%; overflow-y:scroll; overflow-x:auto; cursor:default;}
.box {  position:absolute; z-index:999; margin:0 auto; bottom:10px; left:40px; width:800px; height:40px; border:1px solid #369; background:#f7f7f7; line-height:40px;}
</style>

<div class="box">我是不会被你拖着走的!</div>
<div class="body">
 <p style="margin:15px;">看屏幕底端的区块,再拖动浏览器的滚动条,结果怎么样?满意吧,惊喜吧!</p>
 <div style="height:1000px;"></div>
</div>

 提示:您可以先修改部分代码再运行

如果不明白,就自己再多想想吧!

还有种方法就是利用js来实现了。在此也顺便贴出来吧!

.floatBar { width:100%; position:fixed; bottom:0!important;height:31px; background:#f7f7f7; border:1px solid #369;}
.floatBar {
 _position:absolute;
 _top:expression(eval(document.compatMode &&
        document.compatMode=='CSS1Compat') ?
        documentElement.scrollTop
        +(documentElement.clientHeight-this.clientHeight) - 100
        : document.body.scrollTop
        +(document.body.clientHeight-this.clientHeight) - 100);
}

<div style="height:800px;">下面的层是不随滚动条而动的。</div>
<div class="floatBar">
这个是利用js实现的固定定位。
</div>

The Comment(评论内容只代表网友观点,与本站立场无关!)
  • 文章标题:
  • ie6玩转position:fixed(实现固定定位)
  • 你的名字:
  •  (注意:名字中不能有空格!)
  • 打 分:
  • 100分 85分 70分 55分 40分 25分 10分 0分
  • 评论内容:
  • (注“”为必填内容。)
  • lewar    发表于2008-7-7 17:34:32    打分:85
  • 好东西啊。 
  • mingt    发表于2008-7-5 15:24:12    打分:85
  • 这两天刚好在找这个效果的代码。收下了 
  • wish    发表于2008-7-4 21:50:19    打分:85
  • 这个不错!想不到样式表还有这样的写法。受教了! 

订阅

订阅我的文章 订阅到“鲜果” 订阅到“抓虾” 订阅到“Google” 订阅到“Yahoo”