如何实现滚动到.content区域时显示固定右侧的.hidden-element

这个需求很常见，我之前做项目的时候也遇到过，核心思路就是监听页面滚动，判断当前视口是否处于.content的范围内，然后动态控制右侧元素的显示隐藏。给你一套完整的可直接运行的方案：

1. 基础HTML结构 #

先搭好页面的骨架，确保每个区域都有对应的类名，方便后续操作：

<div class="header">Header 区域</div>
<div class="content">
  Content 区域
  <div class="hidden-element">我是右侧固定的元素</div>
</div>
<div class="footer">Footer 区域</div>

2. CSS样式配置 #

给各个区域设置高度模拟真实页面布局，同时把.hidden-element默认隐藏，设置固定定位在右侧：

/* 基础布局样式 */
.header {
  height: 100vh; /* 占满一屏，模拟长头部 */
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.content {
  height: 150vh; /* 内容区域设置更长，方便测试滚动 */
  background: #e0e0e0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.footer {
  height: 100vh; /* 底部占满一屏 */
  background: #d0d0d0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

/* 右侧固定元素样式 */
.hidden-element {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  background: #2c3e50;
  color: white;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  display: none; /* 默认隐藏 */
  z-index: 999; /* 确保在其他元素上方 */
}

3. JavaScript核心逻辑 #

通过监听scroll事件，结合getBoundingClientRect()获取.content的位置信息，判断当前视口是否处于.content范围内，进而切换元素显示状态：

// 获取目标元素
const contentSection = document.querySelector('.content');
const fixedElement = document.querySelector('.hidden-element');

// 监听滚动事件
window.addEventListener('scroll', () => {
  // 获取.content相对于视口的位置信息
  const contentRect = contentSection.getBoundingClientRect();
  // 获取当前视口高度
  const viewportHeight = window.innerHeight;

  // 判断条件：.content的顶部进入视口，且底部未完全离开视口
  const isInContentArea = contentRect.top < viewportHeight && contentRect.bottom > 0;

  // 根据条件切换显示状态
  fixedElement.style.display = isInContentArea ? 'block' : 'none';
});

性能优化补充 #

滚动事件会频繁触发，为了避免性能损耗，可以给滚动事件加个节流处理，减少计算频率：

let throttleTimer = null;

window.addEventListener('scroll', () => {
  if (throttleTimer) return;
  
  throttleTimer = setTimeout(() => {
    const contentRect = contentSection.getBoundingClientRect();
    const viewportHeight = window.innerHeight;
    const isInContentArea = contentRect.top < viewportHeight && contentRect.bottom > 0;
    
    fixedElement.style.display = isInContentArea ? 'block' : 'none';
    
    throttleTimer = null;
  }, 100); // 每100毫秒执行一次判断，可根据需求调整
});

这个方案兼容性很好，主流浏览器都支持，你可以直接复制代码测试，调整样式和高度适配你的实际页面即可。

内容的提问来源于stack exchange，提问作者grylmz