javascript实现置顶的方法：1、通过getBoundingClientRect获取元素到浏览器视窗顶部的距离；2、通过“$(document).scrollTop() for(…)”方法实现置顶功能即可。
本文操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。
JavaScript实现置顶功能
JavaScript实现置顶功能的方式有很多，之前也用过一些， 感觉比较复杂吧，自己最近做的东西需要，因此也在网上找了些资料，最后找到一个方法 getBoundingClientRect() 可以获取页面元素到浏览器视窗顶部的距离。
最后代码如下：
let len = document.getElementById('flexbox').getBoundingClientRect().top;//获取元素到浏览器视窗顶部的距离//$(document).scrollTop()为滚动条的高度 for (let i = $(document).scrollTop(); i < len + $(document).scrollTop(); i++) { setTimeout(function () { window.scrollTo(0, i); }, 0) }
登录后复制
用循环的目的主要是使得元素置顶的时候不突兀，这个过程可以通过改变i++来实现，同时需要注意一点，如果for语句用的是var i 而不是let i,定时器则需要用立即执行函数包裹来保证i能立马生效。
用这种方式实现的置顶和锚点效果差不多，如果要实现悬浮置顶（某个部分固定在顶部），则可以考虑用position:fixed来实现。
立即学习“Java免费学习笔记（深入）”；
就这样吧。。。。
【推荐学习：javascript基础教程】
以上就是javascript怎么实现置顶的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2945871.html
