利用getBoundingClientRect()来实现div容器滚动固定

最新推荐文章于 2023-06-09 14:06:35 发布
最新推荐文章于 2023-06-09 14:06:35 发布
阅读量227 收藏
点赞数
分类专栏： 前端 文章标签： getboundingclientrect()
原文链接：https://www.mk2048.com/blog/blog.php?id=hhibkc1ijbjb&title=%E5%88%A9%E7%94%A8getBoundingClientRect%28%29%E6%9D%A5%E5%AE%9E%E7%8E%B0div%E5%AE%B9%E5%99%A8%E6%BB%9A%E5%8A%A8%E5%9B%BA%E5%AE%9A
版权

ele.getBoundingClientRect()的方法是可以获得一个元素在整个视图窗口的位置

可以return的值有width,height,top,left,x,y,right,bottom

 

场景

当你的一个div是处在viewport的一个中部位置

你想要的效果是当页面滚动到这个div的时候，这个div就固定在页面的顶部位置，其它滚动不变

 

思路

实现的思路可以利用这个方法来拿到这个div的top值

这个top值就是这个div到viewport的top值

监听页面的滚动事件 然后当这个top值<=0的时候 你可以给这个div加一个fixed固定的一个css样式

就可以实现这样一个效果了

 

好像貌似兼容性不是很好啊

 


更多专业前端知识，请上 【猿2048】www.mk2048.com
qq_29069777
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现拖拽div层
08-20
本文将详细讲解如何利用JavaScript实现div层的拖拽功能，并结合相关标签"js"、"拖拽"和"div层"进行深入讨论。 首先，我们需要创建一个可拖动的div元素。在HTML中，可以这样定义： ```html <div id="draggable" ...
详解 vue better-scroll滚动插件排坑
11-27
此外，还可以利用 `scrollEnd` 回调来处理滚动结束后的逻辑，如分页加载数据。 总的来说，Vue BetterScroll 能够很好地满足移动端滚动的需求，但正确配置和使用是关键。在遇到问题时，查阅官方文档、社区讨论和已有...
JAVASCRIPT原生之getBoundingClientRect和滚动事件(三)
lyx9611的博客
04-29 393
1、getBoundingClientRect 2、滚动相关
根据当前视口改变div宽度问题getBoundingClientRect
parkwoojin1102的博客
09-25 266
html <div :style="`width: ${width}`" ref="section" class="table"> </div> js 之前放到mounted周期里，width不会实时变化，需要更改数据后才会变化，换到beforemount后width实时变化 <script> data() { return { width: '100%', } }, beforemount(){ ...
getBoundingClientRect在页面发生滚动时值发生改变
Don't lost way
04-25 1019
这是由于getBoundingClientRect参考的是视窗的左上角，而不是文档的左上角，如果想要在页面发生滚动时还以文档的左上角为参考点，只需把滚动值加上即可。 即 top+window.scrollY left+window.scrollX 参考文档： https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect ...
含有滚动条元素的getBoundingClientRect等属性的值
高山上的鱼
10-21 1977
问题1：首先我们给出iScroll的一个官方的demo,你可以把这个demo拷贝到本地然后运行，或者去github下载 iScroll demo: scrollbars var myScroll; function loaded () { myScroll = new IScroll('#wrapper', { scrollbars: true, mouseWheel:
JS 中getBoundingClientRect()的用法
haoxiang110的专栏
11-29 1608
下面的代码举了个简单的例子，可以滚动滚动条之后点红色区域看各个值的变化。 DemoDemo为了方便就直接用绝对定位的元素 有了这个方法，获取页面元素的位置就简单多了， var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft; var Y =this.getBoundingClientRect().top+document.documentEle
弹性滚动对联广告代码.zip
07-11
这种广告形式通常基于JavaScript（JS）特效来实现，能够根据用户滚动页面时的位置自动调整广告的位置，从而始终保持在用户的视线范围内。在本压缩包中，我们有以下文件： 1. **images**：这是一个包含图片资源的...
全屏滚动插件
08-10
这种插件利用JavaScript技术实现页面元素的平滑滚动，让整个屏幕内容逐屏展示，提升用户体验。在本项目中，我们将深入探讨全屏滚动插件的实现原理、相关技术以及如何使用名为"pageScroll-master"的压缩包文件。 ...
原生JS左右滚动焦点图.zip
07-05
- 基本思想是利用JavaScript控制DOM（文档对象模型）元素的CSS样式，特别是`left`或`transform`属性，来实现图片的左右平滑滚动。 - 通常会有一个包含多个子元素（图片）的容器，通过改变容器的位置来达到滚动效果...
getBoundingClientRect().top与offsetTop的区别
最新发布
Wangdr的博客
06-09 1170
返回当前元素相对于 offsetParent（position为非static且距离自己最近的祖先元素） 节点顶部边界的偏移像素值。当监听的是window的滚动条时，元素的getBoundingClientRect().top会原来越小，而offsetTop一直不变。楼层导航，懒加载，返回顶部按钮等等，只要涉及scroll事件，都无法避免的要去计算某个元素距离视窗顶部的距离。且这个距离不随滚动条滚动变化，也就是说这个距离开始是多少就是多少，是个恒定值（包括滚动条卷起的部分）1、监听window的滚动条。
getBoundingClientRect的实用场景
weixin_30505225的博客
05-28 143
在用vue开发项目时候，遇到一个问题，首页有代办列表，是固定定位，滚动时候需要监听距离页面顶部的距离，如果很接近顶部则将代办列表展示，首页隐藏，如果再网上翻动则又回到首页。 因为是是fixed定位，所以用得了getBoundingClientRect：用于获取某个元素相对于视窗位置集合。集合中有top，right，bottom，left等属性。 1，语法 top =object.getBo...
getBoundingClientRect() 方法练习
qq_42514643的博客
10-25 363
getBoundingClientRect() 实现购物车飞入案例 此案例结合了vue实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia...
offsetParent、getBoundingClientRect与其他位置相关属性
wll_web的博客
04-13 419
写在前面：本文章中的代码演示，默认清除的了 body 和 html 的 margin、padding。 定位父级 Element.offsetParent。 定位父级 offsetParent 是一个只读属性。 该属性返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table, td, th, body 元素。 <div id="box1"> <div id="box2"> <div id="box3"></div>
getBoundingClientRect 视口的距离
cvvvvvvvvvv的博客
12-09 321
const onScroll = () => { //getBoundingClientRect相对视口的距离 const rect = refAutor.current!.getBoundingClientRect() if (rect.top <= 0) { setIsShowAuthor(true) } else { setIsShowAuthor(false) } } //副作用 useEffect(() => .
getBoundingClientRect()方法详解
weixin_44222717的博客
12-26 1866
一.getBoundingClientRect()分析 getBoundingClientRect()获取元素位置，这个方法没有参数 getBoundingClientRect()用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。 getBoundingClientRect()是DOM元素到浏览器可视范围的距离（不包含文档卷起的部分）。 该函数返回一个Object对象，该对象有6个...
getBoundingClientRect 与 滚动加载
好好学习，天天向上 ～
12-02 564
getBoundingClientRect 用bottom举例, 获取到的数据是元素底部相对于屏幕上边的距离 const client = $dom.getBoundingClientRect(); 1、如果元素位于屏幕上面的不可见区域，client.bottom 会是负数 2、如果元素位于屏幕下面不可见区域，client.bottom > window.innerHeight 假如有个滚动加载的需求： 1、元素需要滚动加载，那么首先已经加载的部分最后一条记录的client....
getBoundingClientRect()方法获取Dom元素与浏览器窗口的位置
YMX2020的博客
07-15 3459
获取Dom元素与浏览器窗口的位置（二）----- getBoundingClientRect()方法 ​ getBoundingClientRect()这个方法可以在不需要额外传参的情况下获取Dom元素的位置，但是值得注意的是，他获取到的位置是可视区范围的，不包括文档滚动的距离 下面我们用一张图来表示他获取到的Dom元素相关信息 上面的那张图让我们对getBoundingClientRect有了一个整体的初步认识，为了更加直观和细致的感受getBoundingClientRect的用法，下面我打算用一个
前端性能优化小结
面对疾风吧
07-15 800
前言 移动互联网时代，用户对于网页的打开速度要求越来越高。首屏作为直面用户的第一屏，其重要性不言而喻。优化用户体验更是我们前端开发非常需要 focus 的东西之一。 从用户的角度而言，当打开一个网页，往往关心的是从输入完网页地址后到最后展现完整页面这个过程需要的时间，这个时间越短，用户体验越好。所以作为网页的开发者，就从输入url到页面渲染呈现这个过程中去提升网页的性能。 所以输入URL后发生了什么呢？在浏览器中输入url会经历域名解析、建立TCP连接、发送http请求、资源解析等步骤。 http缓存优化是
用 js 实现推拉式滚动效果
05-22
6. 当滑动条被拖动时，根据滑动条的位置计算出当前页数，并将容器滚动到当前页的位置。 ```javascript function drag(e) { const sliderY = e.clientY - container.getBoundingClientRect().top; const slider...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值