开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

当div到达页面上的固定位置时停止滚动

，可以通过监听滚动事件来实现。

首先，需要获取到要停止滚动的div元素的位置信息。可以使用JavaScript的getBoundingClientRect()方法来获取元素相对于视口的位置。

然后，在滚动事件中判断当前滚动的位置是否超过了div元素的位置。如果超过了，则通过修改div元素的CSS属性position为fixed来使其停止滚动。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {
  width: 200px;
  height: 200px;
  background-color: red;
  margin-top: 1000px; /* 设置一个较大的上边距，使其在初始状态下不可见 */
}
</style>
</head>
<body>

<div id="myDiv"></div>

<script>
window.addEventListener('scroll', function() {
  var div = document.getElementById('myDiv');
  var rect = div.getBoundingClientRect();
  
  // 判断当前滚动的位置是否超过了div元素的位置
  if (rect.top <= 0) {
    div.style.position = 'fixed';
    div.style.top = '0';
  } else {
    div.style.position = 'static';
  }
});
</script>

</body>
</html>

在上述示例中，当滚动到div元素的位置时，div元素将停止滚动并固定在页面的顶部。

腾讯云相关产品推荐：如果需要在云计算环境中部署网站或应用程序，可以使用腾讯云的云服务器（CVM）产品。云服务器提供了弹性、可靠的计算能力，可以根据实际需求灵活调整配置。详情请参考腾讯云云服务器产品介绍：https://cloud.tencent.com/product/cvm

相关搜索:为非滚动创建固定位置会打乱页面上的div位置使用滚动后的响应宽度固定div位置单击时滚动到固定目录中的位置固定位置仅当特定div打开时在固定div位置下滚动时隐藏页面内容如何在到达底部时停止粘性侧边栏的固定位置如何在滚动时停止图片移动，css背景位置:固定；将固定位置的div滚动到其底部，然后停止应用固定位置时的过渡div 当CollapsingToolbarLayout到达顶部时停止AppBarLayout中的ScrollingView扩展

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

vue返回上一页面时回到原先滚动的位置

项目结束，测试时发现在首页商品列表中，向上滑动几页后点击进入详情，从详情页面返回商品列表时，页面回到了最顶部，测试不通过说是用户体验不好，要求从哪里点击进去返回该页面时回到原先的滚动页面。...思路：因为vue是单页面应用，进入其他页面时会销毁该页面，用keep-alive不让其刷新，具体实现为： (1).在App.vue中加入： ...component: index, meta: { keepAlive: true } }, 这样在index.vue中，mounted方发只走一次，在浏览器上实现了返回原来滚动位置的目的...但是在手机上测试，发现没用，解决手机上实现目的的方法： //在页面离开时记录滚动位置 beforeRouteLeave (to, from, next) { this.scrollTop =...document.documentElement.scrollTop || document.body.scrollTop next() }, //进入该页面时，用之前保存的滚动位置赋值 beforeRouteEnter

2.9K2 0

控制页面的滚动:自定义下拉到刷新和溢出效果

) 防止滚动逃离固定位置元素通过overscroll-behavior:contain解决禁用拉到刷新(overscroll-behavior-y: contain) 禁用超滚色条纹和橡皮筋效果要在滚动边界时禁用反弹效果...作为一个例子，带一个应用程序抽屉带有大量用户可能需要滚动的项目。当它们到达底部时，溢出容器将停止滚动，因为没有更多内容可供使用。换句话说，用户到达“滚动边界”。...overscroll-behavior 防止滚动逃离固定位置元素 chatbox聊天场景考虑位于页面底部的固定定位聊天室。...最终的结果是当用户到达聊天记录的顶部/底部时，主页面保持放置状态。在聊天框中开始的滚动不会传播出去 ?...(聊天窗口下的内容也会滚动) 页面重叠场景下面”方案的另一个变动就是是当你看到内容在固定位置叠加后滚动时。一个死的样品overscroll行为是为了！浏览器试图帮助，但它最终使网站看起来越来越多。

3.3K2 0

3分钟搞定图片懒加载

随着滚动条的向下滚动，bound.top会越来越小，也就是图片到可视区域顶部的距离越来越小，当bound.top <= clientHeight时，图片的上沿应该是位于可视区域下沿的位置的临界点，再滚动一点点...思路：当页面滚动的时候需要去监听scroll事件，在scroll事件的回调中，判断滚动条是否滚动到最底部，如果是，则将将图片的 src 属性设置为data-src的值。...= document.body.offsetHeight // 当前页面高度然后判断： scrollTop + seeHeight >= bodyHeight 当滚动条到达底部的时候，获取后端分页的数据...当page=0时，会随机返回一页数据，page>=1时会返回相应页码的数据。源代码： <!...当滚动到20张图的底部的时候，就会发出ajax请求，请求下一页数据。 ? 至此本文完，有疑问可以在评论区随时交流哈。

2.4K2 0

CSS粘性定位 - 它的真正工作原理！

使用 position: sticky 使用 position: sticky 时，每个人都很快明白，当视口到达定义的位置时，元素会粘在那里。...当它正常工作时，元素会"粘"在一定位置，但在滚动的其他部分，它又会停止"粘"住。作为一个每天都在使用CSS的人，作者无法接受自己不能深入理解这个问题的根本原因，所以决定深入研究sticky定位。...当视口位置与位置定义匹配时，元素将浮动，例如： top: 0px 。...Fixed - 当项目固定时，它的行为与 position: fixed 完全相同，浮动在视口的相同位置，从流中移除。...这意味着可以定义页脚具有粘性位置，并且在向下滚动时始终会出现粘在底部。当我们到达粘性容器的末尾时，元素将停留在其自然位置。最好将其用于自然位置为粘性容器底部的元素。

2432 0

利用交叉观察者这个小宝贝儿，轻松实现懒加载、吸顶、触底

30px"，那么元素未到达视窗时，就已经切换为可见状态了： ?...当所有盒子距离视窗顶部距离不一致时，效果如下: ?...图片懒加载以前都是监听浏览器滚动，然后遍历拿到每个图片的空间信息，然后判断一些位置信息从而进行图片加载；而现在只需要交给交叉观察者去做： let images = document.querySelectorAll...该方法还有一个好处，那就是当页面上某个节点存在横向滚动条的时候，一样应对自如： ?...这样，即使nav脱离的文档流，也不会影响参考元素的位置： ? 4.

6222 0

利用交叉观察者这个小宝贝儿，轻松实现懒加载、吸顶、触底

30px"，那么元素未到达视窗时，就已经切换为可见状态了： ?...当所有盒子距离视窗顶部距离不一致时，效果如下: ?...图片懒加载以前都是监听浏览器滚动，然后遍历拿到每个图片的空间信息，然后判断一些位置信息从而进行图片加载；而现在只需要交给交叉观察者去做： let images = document.querySelectorAll...该方法还有一个好处，那就是当页面上某个节点存在横向滚动条的时候，一样应对自如： ?...这样，即使nav脱离的文档流，也不会影响参考元素的位置： ? 4.

1.4K4 0

【交互探讨】无限滚动还是分页展示，这是个问题！

如果我们想要到达页脚，每次滚动时，我们都需要滚动快一点，以便在新的项目流进入之前获得一个到达页脚的神奇机会。有时用户发现自己面临滚动挑战而同时按下 Esc键以便及时取消无限滚动。...当用户完成一页的浏览，并且开始下一页的内容时，这里有个非常明显的“切断”，用来区分已看过的和未看到的内容，以及在整个导航过程中完成的状态。...“加载更多”在电子商务中应用效果很好 ——因为所有项目都显示在一个页面上，并且页脚总是可以到达的，因此用户可以很好控制他们看到的所有项目。...当有新的内容加载进来时，我们在视觉上将项目分开，并允许用户在列表中标记他们以后想要继续浏览的位置。我们还可以允许他们在单独的页面上查看他们看到的所有产品，这样他们就可以将查看过的选项与所有选项分开。...当用户向下滚动页面时，URL会被更新，我们也允许他们将URL复制到列表中的当前位置。用户总是可以到达页脚，滚动条指示他们当前所在的位置以及可以跳转到的位置。

3.1K2 0

微信 H5 页面兼容性解决方案

（谷歌浏览器的设计原则，还有一种可能就是当没有内容的时候光标的高度等于input的line-height的值，当有内容时，光标从input的顶端到文字的底部解决办法：高度height和行高line-height...28px; //line-height: 88px; padding-top: 20px; padding-bottom: 20px; } } 2、ios端微信h5页面上下滑动时卡顿...MDN上是这样定义的： -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。...touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。...但如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动 5、Vue中路由使用hash模式，开发微信H5页面分享时在安卓上设置分享成功，但是ios的分享异常问题详情描述： ios当前页面分享给好友，

3.2K3 0

【H5】344- 微信 H5 页面兼容性解决方案

（谷歌浏览器的设计原则，还有一种可能就是当没有内容的时候光标的高度等于input的line-height的值，当有内容时，光标从input的顶端到文字的底部解决办法：高度height和行高line-height...28px; //line-height: 88px; padding-top: 20px; padding-bottom: 20px; } } 2、ios端微信h5页面上下滑动时卡顿...MDN上是这样定义的： -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。...touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。...但如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动 5、Vue中路由使用hash模式，开发微信H5页面分享时在安卓上设置分享成功，但是ios的分享异常问题详情描述： ios当前页面分享给好友

2.6K3 0

微信H5页面兼容性解决方案

（谷歌浏览器的设计原则，还有一种可能就是当没有内容的时候光标的高度等于input的line-height的值，当有内容时，光标从input的顶端到文字的底部解决办法：高度height和行高line-height...font-size: 28px; //line-height: 88px; padding-top: 20px; padding-bottom: 20px; }} 2、ios端微信h5页面上下滑动时卡顿...MDN上是这样定义的： -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。...touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。...但如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动 5、Vue中路由使用hash模式，开发微信H5页面分享时在安卓上设置分享成功，但是ios的分享异常问题详情描述： ios当前页面分享给好友，点击进来是正常

3.3K4 3

css+js实现左右滑动卡片组件

结构与样式结构：卡片分前后两排，每列插入10个div结点，以便做左右位移效果。样式：设置每一列都恰好好在中间位置（或中间位置附近），如下所示。 a....无限滚动原理由于这里的停止位置是固定的，前排永远是当前卡片相对于视口居中，后排永远是两个卡片相对于视口居中，且每个卡片是一样的，所以当卡片列表向前或向右移动到一个目标位置时，都将列表重置为初始位置继续滚动...如下图以前排卡片为例： 1544756683_12_w2480_h1496.png 所以当滚动停止后会统一将列表样式设置为transform: translateX(0)。...目标位移与帧位移为了做出滑动后到停留位置的缓动效果，所以当用户左右滑动屏幕时，会记录滑动距离，计算出卡片该到的目标位移位置，目标位移位置是有规则的，因为这里有10张卡片均分宽度，位置必须是(100%/...，使其在手指离开屏幕时仍有慢慢滑动到目标位置的缓动效果。

30K10 2

javascript如何实现类似西瓜视频的视频队列自动播放？

我也在之前的文章中详细介绍了3种Observer（观察者）的用法，包括位置监听，dom变化监听以及窗口变化监听，它们有非常多的应用场景，所以很有必要研究明白，感兴趣的可以读完本片文章之后学习一下（几个非常有意思的...这里有一个很常见的例子，平时喜欢看短视频的朋友可能会注意到，我们在浏览某视频头条时，滚动视频列表，当某一个视频滚动到手机的一定位置时（一般可以看成是屏幕中心），该视频会自动播放，当移出指定区域后视频会自动关闭并播放移入指定区域的下一个视频...我的第一思路就是监听滚动位置来判断某个视频元素是否到达指定区域内，但是这种方式需要处理的条件很多，比如边界条件判断，滚动方向判断等，而且频繁触发还会出现性能问题。...阈值为1时），触发当前视频的播放即可。...}, [curPlaySrc]) return } 此时视频列表页代码如下

2.4K2 0

使用Intersection Observer API实现视频队列自动播放

这里有一个很常见的例子，平时喜欢看短视频的朋友可能会注意到，我们在浏览某视频头条时，滚动视频列表，当某一个视频滚动到手机的一定位置时（一般可以看成是屏幕中心），该视频会自动播放，当移出指定区域后视频会自动关闭并播放移入指定区域的下一个视频...笔者的第一思路就是监听滚动位置来判断某个视频元素是否到达指定区域内，但是这种方式需要处理的条件很多，比如边界条件判断，滚动方向判断等，而且频繁触发还会出现性能问题。...好在笔者之前深入研究过Intersection Observer API，发现可以使用它提供的API，很方便的监听到元素在指定根元素下的位置变化，并做一些自定义操作： ?...1时），触发当前视频的播放即可。...}, [curPlaySrc]) return } 此时视频列表页代码如下

1.4K2 0

2019-08-09 满屏切换vue项目中使用 vue-fullpage.js

，当我们要设置一个固定在顶部的菜单、导航、元素等时使用 // paddingTop: "100px", // //设置每个section底部的padding，当我们要设置一个固定在底部的菜单...slidesNavigation: true, // //横向幻灯片导航的位置，可以为top或者bottom // slidesNavPosition: bottom, // //内容超过满屏时是否显示滚动条...，但是浏览器滚动条默认行为也有效 // scrollBar: true, // //设置每个section顶部的padding，当我们要设置一个固定在顶部的菜单、导航、元素等时使用...// paddingTop: "100px", // //设置每个section底部的padding，当我们要设置一个固定在底部的菜单、导航、元素等时使用 //...slidesNavigation: true, // //横向幻灯片导航的位置，可以为top或者bottom // slidesNavPosition: bottom, // //内容超过满屏时是否显示滚动条

11.7K3 0

jQuery实现轮播效果

> 需求分析点击向右（左）的图标平滑到下一页无限循环切换，第一页的上一页为最后页，最后一页的下页是第一页每隔3s自动滑动到下一页当鼠标进入图片区域时，自动切换停止，当鼠标离开后自动切换开始切换页面时...ITEM_TIME 求出单元移动的偏移量 itemOffset = offset(偏移量)/(TIME/ITEM_TIME) 计算出要移动到的目标位置循环定时器进行平滑移动代码实现 $(function...为了实现无缝滚动的效果我们要在第一张图片前面添加最后一张图片，在最后一张图片后面添加第一张图片当切换到克隆的（第一张/最后一张）图片时，跳转到真正的图片修改css #list{ width...(() => { nextPage(true) },3000) //当鼠标进入图片区域时，自动停止，当鼠标离开，有开始自动切换 $container.hover(function()...到此基本的轮播图实现完成，但是这里还有一个bug，当快速点击切换图片时会出现“空白的情况” 出现这种问题的原因是快速点击时触发了多个定时器进行移动解决办法：只时一个定时器生效 //当前滚动图片的下标

6K2 0

移动端吸顶fixbar解决方案

需求背景经常会有这样的需求，当页面滚动到某一个位置时，需要某个页面元素固定在屏幕顶部，并且有时需要连续滚动吸顶。...问题 position：fixed给移动端带来的问题： IOS8在页面滚动时，吸顶不连续；页面滑动时，不见吸顶，页面滚动停止后，吸顶缓慢出现滚动到顶部之后，会出现两个一样的吸顶, 过一会才恢复正常。...iPhone 4s&5 / iOS 6&7 / Safari 下，页面底部footer输入框失去焦点时，header定位出错。当页面有滚动动作时，header定位恢复正常。...在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。...安卓滚动距离超过某位置时，js动态设置样式；为了防止惯性滚动引起的fix不及时的情况，在 touchstart、 touchmove 、 touchend 事件都进行监听。

2.9K3 0

js漂浮广告代码_JavaScript上传文件代码

//浮动广告代码 var x = 50,y = 60; //设置元素在浏览器窗口中的初始位置 var xin = true, yin = true; //设置xin、yin用于判断元素是否在窗口范围内...{ var L=T=0; var R= document.body.clientWidth-obj.offsetWidth; //浏览器的宽度减div对象占据的空间宽度就是元素可以到达的窗口最右边的位置...对象的初始位置 //当没有拉到滚动条时，document.body.scrollTop的值是0 //当拉到滚动条时，为了让div对象在屏幕中的位置保持不变，就需要加上滚动的网页的高度 obj.style.top...1:-1);//水平移动对象，每次判断左移还是右移 if (x < L) { xin = true; x = L;} if (x > R){ xin = false; x = R;} //当div...移动到最右边，x大于R时，设置xin = false //让x每次都减1，即向左移动，直到x< L时，再将xin的值设为true，让对象向右移动 y = y + step*(yin?

7.4K2 0

返回顶部的几种方法总结

大家好，又见面了，我是你们的朋友全栈君。 1.锚点但是唯一的缺点就是样式不怎么样，会显示这个锚标记。...页面底部放置：返回顶部二、使用Javascript Scroll函数返回顶部 scrooll函数用来控制滚动条的位置，有两种很简单的实现方式...：方式1（推荐：简单方便）：返回顶部 </div...if(document.documentElement.scrollTop==0) clearTimeout(scrolldelay); 缺点：滚动效果不平滑，且在页面很长时点击返回顶部，未向上到达页面顶部无法再正常浏览页面...；同上依旧是静态固定于页面底部，不一定能曝光在用户面前。

1K1 0

为博客园添加目录的方法总结

添加js脚本到“页脚Html代码” 打开博客园后台，进入“设置”标签页，在最下面的“页脚Html代码”对应的编辑框粘贴下面的js代码，然后点“保存”按钮保存。...text-align:left; position:fixed;/*将div的位置固定到距离top:50px，right:0px的位置，这样div就会处在最右边的位置，距离顶部50px*/...添加js脚本到“页首Html代码” ?...window.scrollTo) { return false; } //窗体滚动时，禁用鼠标滚轮 window.onmousewheel...var dist = 0; if (currentpos == finalpos) {//到达预定位置，则解禁鼠标滚轮，并退出 window.onmousewheel

7892 0

博客园_01_为博客园添加目录的方法总结

，邮件也需要注明用途，快的话1小时就能搞定了 2....添加js脚本到“页脚Html代码” 打开博客园后台，进入“设置”标签页，在最下面的“页脚Html代码”对应的编辑框粘贴下面的js代码，然后点“保存”按钮保存。..., sans-serif; text-align:left; position:fixed;/*将div的位置固定到距离top:50px，right:0px的位置，这样div就会处在最右边的位置...window.scrollTo) { return false; } //窗体滚动时，禁用鼠标滚轮 window.onmousewheel...var dist = 0; if (currentpos == finalpos) {//到达预定位置，则解禁鼠标滚轮，并退出 window.onmousewheel

1.3K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭