您的位置是:网站首页>Javascript编程Javascript编程

javascript怎么实现窗口置顶

少儿编程网2021-12-24 15:23:14Javascript编程 人已围观 来源:少儿编程 -用户投稿

简介javascript实现窗口置顶的方法:1、创建一个前端示例文件;2、通过getBoundingClientRect获取元素到浏览器视窗顶部的距离;3、用循环方式使元素置顶即可。本文操作环境:windows7系统、javascript1.8.5版、DellG3电脑。javascript怎么实现窗口置

www.pxcodes.com

javascript实现窗口置顶的方法:1、创建一个前端示例文件;2、通过getBoundingClientRect获取元素到浏览器视窗顶部的距离;3、用循环方式使元素置顶即可。jZA少儿编程网-https://www.pxcodes.com

jZA少儿编程网-https://www.pxcodes.com

<link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-1a85854398.css"/>

本文操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。jZA少儿编程网-https://www.pxcodes.com

javascript怎么实现窗口置顶?jZA少儿编程网-https://www.pxcodes.com

JavaScript实现置顶功能jZA少儿编程网-https://www.pxcodes.com

JavaScript实现置顶功能的方式有很多,之前也用过一些, 感觉比较复杂吧,自己**近做的东西需要,因此也在网上找了些资料,**后找到一个方法 getBoundingClientRect() 可以获取页面元素到浏览器视窗顶部的距离。**后代码如下:jZA少儿编程网-https://www.pxcodes.com

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能立马生效。jZA少儿编程网-https://www.pxcodes.com

用这种方式实现的置顶和锚点效果差不多,如果要实现悬浮置顶(某个部分固定在顶部),则可以考虑用position:fixed来实现。
就这样吧。。。。jZA少儿编程网-https://www.pxcodes.com

推荐学习:《javascript基础教程》

以上就是javascript怎么实现窗口置顶的详细内容,更多请关注少儿编程网其它相关文章!jZA少儿编程网-https://www.pxcodes.com

来源:php中文网jZA少儿编程网-https://www.pxcodes.com

www.pxcodes.com

相关文章:

支持一下 ( )

javascript怎么实现窗口置顶

      匿名评论
    • 评论
    人参与,条评论
    javascript怎么实现窗口置顶

微信公众号

免费视频教程

先知道