Rumah > hujung hadapan web > html tutorial > 如何在IE6下实现position:fixed效果_html/css_WEB-ITnose

如何在IE6下实现position:fixed效果_html/css_WEB-ITnose

WBOY
Lepaskan: 2016-06-24 11:41:42
asal
1122 orang telah melayarinya

如何在IE6下实现position:fixed效果:
建议:尽可能的手写代码,可以有效的提高学习效率和深度。
由于IE6并不支持position:fixed,所以导致很多好的效果都无法实现,但是在IE6下并不是不能够实现此中效果,下面就通过一段实例介绍一下如何实现此种效果。代码实例如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><title>IE6下实现position:fixed-蚂蚁部落</title><style type="text/css">body{  margin:40px;  padding:0px;  border:1px solid blue;}.first{  width:300px;  height:600px;  border:1px solid red;  margin:20px;}.first .fixed{  width:100px;  height:100px;  background-color:black;  position:fixed;  _margin-top:20px;  _position:absolute;  _top:expression(eval(document.documentElement.scrollTop));  left:20px;  top:20px;}</style></head><body><div class="first">  <div class="fixed"></div></div></body></html>
Salin selepas log masuk

以上代码可以兼容IE6和其他主流浏览器,实现此效果的核心代码是:

_top:expression(eval(document.documentElement.scrollTop));
Salin selepas log masuk

注意:加上了上面这一行代码之后,IE6下top功能失效了,所以要加一个_margin-top。
虽然上面的代码实现了想要的功能,但是还是有点问题,那就是当拖动滚动条的时候会出现颤抖现象。代码修改如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><title>IE6下实现position:fixed-蚂蚁部落</title><style type="text/css">*{  margin:0px;  padding:0px;}body{height:1000px;}#thediv{  width:100px;  height:100px;  background-color:#CCC;  position:fixed;  _margin-top:20px;  _position:absolute;  _top:expression(eval(document.documentElement.scrollTop));  left:20px;  top:20px;  text-align:center;  line-height:100px;}</style><script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script><script type="text/javascript">$(function(){   $(window).scroll(function(){     $("#thediv").text($(window).scrollTop());  })}); </script></head><body><div id="thediv"></div></body></html>
Salin selepas log masuk

以上代码完美实现了我们想要的功能,在第一段实例基础上添加如下代码:

*html{  background-image:url(about:blank);  background-attachment:fixed;}
Salin selepas log masuk

原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0405/144.html

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan