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

2023-05-25,,

网站中常见这种效果,某个广告或详情页切换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效果的相关教程结束。

《元素随屏幕滚动到顶部固定js效果.doc》

下载本文的Word格式文档,以方便收藏与打印。