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

<!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>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Window和document对象的区别 window对象window对象表示浏览器中打开的窗口window对象是...
    FConfidence阅读 6,693评论 0 5
  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 5,882评论 0 1
  • html结构 (Emmet) (div.box>div.pic>img[src="images/$.jpg"])*...
    LaBaby_阅读 3,841评论 0 0
  • Ecmascript 大括号的位置function f() { return { h:'Hello Wo...
    FConfidence阅读 4,535评论 0 2
  • 吃饭的时候,看到一个吃饭很好看的姑娘。 有没有人像我一样爱看别人的吃相?有的人狼吞虎咽唉,一大口菜直接塞嘴里,嚼不...
    叶开开阅读 2,701评论 4 0