前端杂货铺

来做一个兼容IE6且在屏幕右方中间的广告栏吧

2016-11-24  本文已影响0人  DarksidersJC

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">

    *{
        margin: 0;
        padding: 0;
    }
    body{
        height: 5000px;
    }
        #ad{
            width: 100px;
            height: 200px;
            position: absolute;
            right: 10px;
            top: 50%;
            
        }
        
    </style>
</head>
<body>
    
<div id="ad">
<img src="img/IMG_4507.JPG" />  
</div>  


<script type="text/javascript">
    
     var oAd = document.getElementById('ad');
    function ad(){
        // console.log('scroll');
        // 通用解决方案
        var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;

        var windowHeight = document.documentElement.clientHeight;
        var oAdHeight = oAd.offsetHeight;

        var h = (windowHeight-oAdHeight)/2+scrollTop;
        // console.log(h);
        oAd.style.top = h + 'px';
    }
    ad();
    window.onresize = window.onscroll = ad;
    
    
    
</script>
</body>

</html>

上一篇 下一篇

猜你喜欢

热点阅读