如何实现Div到达终点位置前固定可见、到达后可被滚动越过的交互效果？

嘿，这个需求我太熟了！其实核心就是根据滚动距离动态切换元素的定位方式，我给你拆解一下具体怎么做，包你一看就会：

核心思路 #

咱们得先给这个盒子定好「终点线」——也就是它什么时候该从固定状态切换成能被滚动越过的状态。简单说就是：

• 当页面滚动距离还没让盒子碰到终点时，用fixed定位让它钉在屏幕上；
• 一旦滚动到盒子该停下来的位置，就切换成absolute定位，让它跟着页面一起滚动，不再固定。

直接上可运行的代码示例 #

HTML结构 #

先搭个基础页面，留足够的滚动空间测试效果：

<div class="container">
  <div class="top-content">滚动我看看效果~</div>
  <div id="movingDiv">我是那个会先固定再滚动的盒子</div>
  <div class="bottom-content">继续滚动，我就会被滚过去啦</div>
</div>

CSS样式 #

注意父容器container要设position: relative，这样后面的absolute定位才能基于它生效：

.container {
  position: relative;
  min-height: 2000px; /* 给足够的滚动高度 */
}

.top-content {
  height: 300px; /* 页面顶部的占位内容 */
  background: #f0f0f0;
  padding: 20px;
}

#movingDiv {
  width: 200px;
  height: 100px;
  background: #42b983;
  color: white;
  padding: 10px;
  position: fixed; /* 初始状态设为固定 */
  top: 20px;
  left: 20px;
}

.bottom-content {
  height: 1000px;
  margin-top: 400px; /* 这个距离就是盒子的终点参考位置 */
  background: #e6e6fa;
  padding: 20px;
}

JavaScript核心逻辑 #

这部分是关键，监听滚动事件动态切换定位：

const movingDiv = document.getElementById('movingDiv');
const bottomContent = document.querySelector('.bottom-content');

// 计算终点位置：底部内容的顶部距离页面顶部的距离 - 盒子的top偏移值
const endPosition = bottomContent.offsetTop - 20;

window.addEventListener('scroll', function() {
  // 兼容不同浏览器的滚动距离获取方式
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

  if (scrollTop + 20 < endPosition) {
    // 还没到终点，保持固定状态
    movingDiv.style.position = 'fixed';
    movingDiv.style.top = '20px';
    movingDiv.style.left = '20px';
  } else {
    // 到达终点，切换为absolute让盒子跟着页面滚动
    movingDiv.style.position = 'absolute';
    movingDiv.style.top = `${endPosition}px`;
    movingDiv.style.left = '20px';
  }
});

额外小提醒 #

• 如果你的页面是响应式的，窗口大小变化后终点位置可能会偏移，记得给window加个resize事件，重新计算endPosition就行；
• 要是觉得滚动监听触发太频繁，还可以加个节流函数优化性能，不过这种简单场景不加也完全没问题~

内容来源于stack exchange