如何用javascript实现置顶

这篇文章主要讲解了“如何用javascript实现置顶”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何用javascript实现置顶”吧！

创新互联长期为1000多家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为姑苏企业提供专业的成都网站设计、网站制作、外贸营销网站建设，姑苏网站改版等技术服务。拥有十年丰富建站经验和众多成功案例,为您定制开发。

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来实现。

就这样吧。。。。

感谢各位的阅读，以上就是“如何用javascript实现置顶”的内容了，经过本文的学习后，相信大家对如何用javascript实现置顶这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！