ie6下如何使得广告窗口不会因为滚动条的滚动而移动

在现实中，网站为了赚钱肯定会有广告，这些广告无论你的滚动条怎么移动都不会移出你的可视区，你总是可以看见这些广告。其背后的原理是通过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的用户只是少部分，单纯的这样弄一下也能满足他们的要求。

ie6下如何使得广告窗口不会因为滚动条的滚动而移动

猜你喜欢