08月24, 2016

浏览器窗口定位

需求:

如下图所示,需要知道黄色模块距离浏览器底部的距离,若距离底部距离小于0,需要向上滚动至露出黄色模块。具体布局参数见代码:

<style>
   html,body{padding: 0;margin:0;}
   .wrap{position: relative; width: 100%;height: 800px;  background: #eaeaea;}
   .poi{position:absolute; margin-top: 300px; width: 100%; height: 100px; background: #ef0; text-align: right;}
</style>
<div class="wrap">
   <div class="poi">poi</div>
</div>

不解释:

<script>
   $(function(){
       var wh = $(window).height();
       var dh = $(document).height();
       var sh = $(window).scrollTop();
       var bh = $(".poi").offset().top;
       var h = $(".poi").height();
       var to_btm = wh - bh + sh -h;
       console.log("浏览器视窗高度:"+wh);
       console.log("页面文档高度:"+dh);
       console.log("页面向上滚动高度:"+sh);
       console.log("元素距离页面顶部高度:"+bh);
       console.log("元素自身高度:"+h);
       console.log("元素底部距离浏览器的高度:"+to_btm);
   });
</script>

解释如图:

ps:

$('html,body').animate({scrollTop:bh+100},500);

本文链接:http://westpsk.com/post/js-postion.html

-- EOF --

Comments