首页 > 代码库 > JS-DOM:基础实操---以“对联”方式固定在页面

JS-DOM:基础实操---以“对联”方式固定在页面

主要见于:天猫主页右侧的固定栏、京东主页右侧固定栏

 

方法一:

CSS部分:

<style type="text/css">
body{
    height: 3000px;
}
#div1{
    width: 50px;
    height: 150px;
    background-color: #ccc;
    position: absolute;
    right: 0;
    /*top: 50%;*/
    /*margin-top: -75px;*/
}
</style>

HTML部分:

<body>
<div id="div1"></div>
</body>

JS-DOM部分:

<script>

window.onload=function(){

  var oDiv=document.getElementById("div1");

  var bodyScrollTop=document.body.scrollTop||document.documentElement.scrollTop;

  //获取可视区的高度

  var bodyHeiht=document.documentElement.clientHeight;

  var top=(bodyHeight-oDiv.offsetHeight)/2+bodyScrollTop;

  oDiv.style.top=top+"px";

  

  window.onscroll=function(){

    //var bodyScrollTop=document.body.scrollTop;

    //var bodyScrollTop=document.documentElement.scrollTop;

    var bodyScrollTop=document.body.scrollTop||document.documentElement.scrollTop;

    //获取可视区的高度

    var bodyHeight=document.documentElement.clientHeight;

    var top=(bodyHeight-oDiv.offsetHeight)/2+bodyScrollTop;

    oDiv.style.top=top+"px";

  }

}

</script>

 

方法二:

CSS部分:

<style type="text/css">
body{
    height: 3000px;
}
#div1{
    width: 50px;
    height: 150px;
    
    position: absolute;
    right: 0;
    /*top: 50%;*/
    /*margin-top: -75px;*/
}
</style>

HTML部分:

<body>
<div id="div1"></div>
</body>

JS-DOM部分:

<script>

window.onload=window.onresize=window.onscroll=function(){

  var oDiv=document.getElementById("div1");

  var bodyScrollTop=document.body.scrollTop||document.documentElement.scrollTop;

  var bodyHeight=document.documentElement.clientHeight;

  var top=(bodyHeight-oDiv.offsetHeight)/2+bodyScrollTop;

  

  oDiv.style.top=top+"px"; 

}

</script>

 

 

方法三:

CSS部分:

<style type="text/css">
body{
    height: 3000px;
}
#div1{
    width: 50px;
    height: 150px;
    
    position: absolute;
    right: 0;
    /*top: 50%;*/
    /*margin-top: -75px;*/
}
</style>

HTML部分:

<body>
<div id="div1"></div>
</body>

JS-DOM部分:

<script>

window.onload=function(){

  var oDiv=document.getElementById("div1");

  if(window.navigator.userAgent.indexOf("MSIE 6")!=-1){

    function move(){

      var bodyScrollTop=document.body.scrollTop||document.documentElement.scrollTop;

      var bodyHeight=document.documentElement.clientHeight;

      var t=bodyScrollTop+(bodyHeight-oDiv.offsetHeight)/2;

      oDiv.style.top=t+"px";

    }

    move();

    window.onresize=window.onscroll=move;

  }else{

    oDiv.style.position="fixed";

    oDiv.style.top="50%";

    oDiv.style.marginTop="-75px";

  }

}

</script>