News新闻

业界新闻动态、技术前沿
Who are we?

您的位置:首页      网站知识      建立拖动控制条不动的浮动DIV,类似京东淘宝产品详情描述

建立拖动控制条不动的浮动DIV,类似京东淘宝产品详情描述

发布日期:2014-01-15 17:13:00 1246

首先,在网页里设置DIV的ID和样式

重要的有2个地方,1、设置ID值,2、设置

例如:<div id=”left_mu” style=”top: 81px; position: fixed;”>

其中设置position: fixed;是让之拖动页面的时候其位置固定不变,top值是相对页面顶部的距离,此处根据需要设置。

 

页面需要的JS支持

<script type=”text/javascript”>
var obj11 = document.getElementById(“left_mu”);   //此处的跟上面DIV的ID值对应
var top11 = getTop(obj11);
var isIE6 = /msie 6/i.test(navigator.userAgent);
window.onscroll = function(){

var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (bodyScrollTop > top11){
obj11.style.position = (isIE6) ? “absolute” : “fixed”;
obj11.style.top = (isIE6) ? bodyScrollTop + “px” : “81px”;  //此处跟上面DIV设置的距离页面底部浮动距离一致,作用是当页面未到达81PX的时候position: fixed无效,当超过81PX的时候生效
} else {
obj11.style.position = “static”;
}
}

</script>