元素随屏幕滚动到顶部固定js效果

网站中常见这种效果,某个广告或详情页切换tab,当屏幕向下移动时,该元素会停留在浏览器最顶部,下面ecshop模板中心教您实现js代码:

案例图:

 

 

 

1.首先在页面上找到该元素  加上 id ="inner" 。

 

2.在页面加js代码

 

<script type="text/javascript">

var obj11 = document.getElementById("inner");

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" : "0px";

} else {

obj11.style.position = "static";

}

}

function getTop(e){

 

var offset = e.offsetTop;

if(e.offsetParent != null) offset += getTop(e.offsetParent);

return offset;

}

</script>

你可能感兴趣的:(js)