博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
元素随屏幕滚动到顶部固定js效果
阅读量:7263 次
发布时间:2019-06-29

本文共 693 字,大约阅读时间需要 2 分钟。

网站中常见这种效果,某个广告或详情页切换tab,当屏幕向下移动时,该元素会停留在浏览器最顶部,下面教您实现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>

转载地址:http://yardm.baihongyu.com/

你可能感兴趣的文章
动态生成SQL执行语句
查看>>
Eclipse安装scala
查看>>
仿京东首页,浏览器兼容小结
查看>>
Checking For User Permissions Before Updating or Inserting The Records in Oracle Forms
查看>>
Fabio 安装和简单使用
查看>>
在ArcEngine中使用Geoprocessing工具-执行工具
查看>>
iOS safari 苹果手机如何阻止页面弹性“橡皮筋效果”?
查看>>
软件各种版本的含义!例如RC,M,GA等等
查看>>
nginx+tomcat 架构 HttpServletRequest.getScheme()获取正确的协议
查看>>
Atitit gui界面ui技术发展史与未来趋势
查看>>
windows下tomcat7+nginx1.8负载均衡
查看>>
Blender之OBJ转json
查看>>
SpreadSheet数据导出为DataTable z
查看>>
文本框改变时触发
查看>>
泛型的协变和逆变的概念引入
查看>>
如何使用C#操作WinAPI
查看>>
java-JProfiler(三)-进行本地JVM的性能监控
查看>>
NOIP2013Day1T3 表示只能过一个点
查看>>
wifi连接android设备进行调试
查看>>
死循环
查看>>