在现实中,网站为了赚钱肯定会有广告,这些广告无论你的滚动条怎么移动都不会移出你的可视区,你总是可以看见这些广告。其背后的原理是通过position的fixed来进行定位的,这种办法除了广告栏,一些导航栏也这样子使用。但是,如果万恶的客户或者老板叫你兼容ie6的情况下,要如何实现呢?
首先要提的是,在ie6下,fixed就变没用了,即使你定好了top和left,它都依然在左上角,并且一移动滚动条就不在可视区的范围内了,解决这个方法很简单,就是将它的定位设为absolute,然后通过鼠标滚动条事件来进行定位,如:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title></title>
<style type="text/css">
#div1 {
width: 200px;
height: 150px;
background: red;
position: absolute;
right: 0;
bottom: 0;
}
body {
height: 2000px;
}
</style>
</head>
<body>
<div id = 'div1'></div>
</body>
<script type="text/javascript">
var oDiv = document.getElementById('div1')
window.onscroll = function () {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop + 'px'
}
</script>
</html>
不过这段代码有个不好的地方在于,由于你是对鼠标滚动进行监听的,如果你缩小了屏幕或者放大屏幕,这个div就会不在可视区内了,所以要解决这个问题就要在onscroll后面加入onresize来监听浏览器尺寸的变化:
window.onscroll = window.onresize = function () {}
不过还没完,当你在其他浏览器测试的时候,你会发现div的运动有一点点延迟,因为我们要兼容的只是ie6,在其他浏览器里对position:fixed是支持的,所以要通过用户代理(userAgent)来进行判断:
var useragent = window.navigator.userAgent
var oDiv = document.getElementById('div1')
if (useragent.indexOf('MSIE 6.0') == 25) {
window.onscroll = window.onresize = function () {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop + 'px'
}
} else{
oDiv.style.position = 'fixed'
}
通过这样子,可以减少不必要的麻烦,毕竟ie6的用户只是少部分,单纯的这样弄一下也能满足他们的要求。