评论

收藏

[JavaScript] javascript怎么实现窗口置顶

开发技术 开发技术 发布于:2023-02-04 13:43 | 阅读数:306 | 评论:0

20220215000421-620aee053d5d5.jpg
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怎么实现窗口置顶的详细内容!

关注下面的标签,发现更多相似文章