JavaScript实现置顶功能

KaltZK 发布于2019-08-20 18:13 / 1841人阅读

摘要：实现置顶功能的方式有很多，之前也用过一些，感觉比较复杂吧，自己最近做的东西需要，因此也在网上找了些资料，最后找到一个方法可以获取页面元素到浏览器视窗顶部的距离。

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来实现。
就这样吧。。。。

云服务器 GPU云服务器 php实现置顶功能 javascript实现功能置顶功能 javascript功能

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84213.html

实现置顶功能jQuery

摘要：去顶部去顶部置顶置顶功能置顶功能 HTML：去顶部 CSS： .fl{ display:block; float:left; width:50px; height:50px; ...

SoapEye 2019-08-21 10:19 评论0 收藏0
eyoucms v1.4.9授权破解版易优cms企业建站系统去版权版 v1.4.9

摘要：授权破解版易优企业建站系统易优企业建站系统是一款十分优秀专业的为企业创建网站服务的软件。去版权破解版强大好用，为企业创建网站提供很多帮助和便利。直接去易优官网，购买商业授权即可去除版权。eyoucms v1.4.9授权破解版(易优企业建站系统)是一款十分优秀专业的为企业创建网站服务的软件。eyoucms v1.4.9去版权破解版强大好用，为企业创建网站提供很多帮助和便利。易优cms破解授权...

番茄西红柿 2021-08-10 09:40 评论0 收藏2637
用sort实现orderby

摘要：工作到了这个年数感觉那些基本函数语法已经跟人合一了根本不会为操作一些数据结构而思考半天了在做小程序的时候遇到了个的场景结果发现没有以为的那么简单也许是之前不求甚解的原因那么现在来解决的问题问题的产生与探讨方向在小程序中有个将的某一条置顶的需工作到了这个年数, 感觉那些基本函数语法已经跟人合一了, 根本不会为操作一些数据结构而思考半天了. 在做小程序的时候遇到了个orderby的场景,...

jiekechoo 2019-08-23 14:14 评论0 收藏0
html简单响应式滚动条置顶

摘要：那么盒子首先就需要设置一个的高和定位的值在中也要控制值，通过判断滚动条移动到容器顶部时固定最终效果获取屏幕滚动条简单响应式滚动条置顶一般的，让页面出现滚动条的常见方法有： overflow:auto||overflow:scroll 或者overflow-x水平滚动条和overflow-y垂直滚动条那么现在要实现这样的一个效果：直接在body中给一个header，后面一个Gr...

ranwu 2019-08-01 17:41 评论0 收藏0