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

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