JavaScript完成置顶功用

2019年8月25日 127次阅读 来源: 蓝蓝

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来完成。
就这样吧。。。。

    原文作者：蓝蓝
    原文地址: https://segmentfault.com/a/1190000010291386
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞