求助：实现滚动到指定元素后固定Widget组件的方法

我需要实现一个组件效果：

• 默认状态下，#widget组件固定在页面底部
• 当用户滚动到包含“Experiences shape us.”文本的.xp元素上方时，组件停靠在该文本的上方，不再随滚动继续留在底部

目前无法触发#widget滚动到.xp元素时的固定停靠效果，以下是我的现有代码：

JavaScript代码 #

window.addEventListener('scroll', function() {
  var widget = document.getElementById('widget');
  var xpElement = document.querySelector('.xp');
  var widgetHeight = widget.offsetHeight;
  var xpPosition = xpElement.getBoundingClientRect().top;
  var windowHeight = window.innerHeight;

  var distance = xpPosition - windowHeight + widgetHeight;

  if (distance <= 0) {
    // If the widget encounters the '.xp' element, un-anchor it and let it scroll with the page content
    widget.classList.add('unanchored');
  } else {
    // If the widget is still anchored, position it fixed at the bottom of the viewport
    widget.classList.remove('unanchored');
  }
  
  // Set the height of .xp element dynamically
  xpElement.style.setProperty('--xp-height', widgetHeight + 'px'); // Set xpHeight to widgetHeight
});

HTML代码 #

<h3 id="widget" class="wp-block-heading has-text-align-center frontpage ticss-f97cde6c has-white-color has-text-color has-background" style="background-color:#00000087;font-size:39px">Engage. &nbsp; Involve. &nbsp; Connect.<br><span class="text frontpage2" style="font-weight: 200 !important;">We fuse Art + Engineering to create world-class experiences.</span><br><a href="https://williamh117.sg-host.com/#spacestop"><i class="arrow down"></i></a></h3>

CSS代码 #

.unanchored {
  position: fixed !important; /* Change position to fixed */
  bottom: 300px !important;
  top: calc(100% - var(--widget-height) - 30px); /* Adjust this value to set the desired distance from .xp */
  left: 0 !important;
    margin-bottom:0px !important;
}

.xp {
  --widget-height: 30px; /* Adjust this value to match the height of your widget */
  position: relative; /* Keep position relative */
}

#widget {
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #f0f0f0;
  width: 100%;
  text-align: center;
  transition: bottom 0.3s ease-in-out;
    z-index:1000 !important;
    scroll-behavior: smooth !important;
}

问题分析与修复方案 #

1. 核心逻辑错误：滚动判断条件颠倒 #

现有代码中distance的计算逻辑完全错误，无法正确判断widget与.xp元素的相对位置。正确的逻辑应该是：当.xp元素顶部到视口底部的距离小于等于widget高度时，说明widget即将被.xp“顶到”，此时需要调整widget的位置，让它停靠在.xp上方。

2. CSS样式逻辑矛盾 #

.unanchored类的命名和定位逻辑冲突：默认#widget已经是fixed定位，不需要重复设置；且bottom:300px是硬编码值，无法适配不同屏幕和动态内容高度。

修复后的完整代码 #

JavaScript（含防抖优化）

// 防抖函数优化滚动性能
function debounce(func, delay = 15) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

window.addEventListener('scroll', debounce(function() {
  const widget = document.getElementById('widget');
  const xpElement = document.querySelector('.xp');
  
  // 容错：如果xp元素不存在则终止
  if (!xpElement) return;

  const widgetHeight = widget.getBoundingClientRect().height;
  const { top: xpTop } = xpElement.getBoundingClientRect();
  const windowHeight = window.innerHeight;

  // 计算xp元素顶部到视口底部的距离
  const distanceToBottom = windowHeight - xpTop;

  if (distanceToBottom <= widgetHeight) {
    // 停靠在xp元素上方，保持底部与xp顶部对齐
    widget.style.bottom = `${distanceToBottom}px`;
    widget.classList.add('docked');
  } else {
    // 回到默认固定在视口底部的状态
    widget.style.bottom = '0';
    widget.classList.remove('docked');
  }
}));

CSS

#widget {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #00000087;
  color: white;
  text-align: center;
  transition: bottom 0.3s ease-in-out;
  z-index: 1000;
  margin: 0;
  padding: 1.2rem 0; /* 固定内边距，确保高度计算稳定 */
  box-sizing: border-box; /* 避免内边距撑大宽度 */
}

/* 可选：停靠时的额外样式 */
#widget.docked {
  /* 例如添加阴影增强层次感 */
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}

.xp {
  position: relative;
  /* 不需要额外设置变量，除非有其他布局需求 */
}

HTML（仅需确保.xp元素存在）

确保页面中存在包裹“Experiences shape us.”的.xp元素，例如：

<div class="xp">
  <h2>Experiences shape us.</h2>
  <!-- 其他内容 -->
</div>

关键注意事项 #

• 确保.xp元素在DOM中存在，避免querySelector('.xp')返回null导致逻辑失效
• 使用getBoundingClientRect().height替代offsetHeight，确保高度计算包含所有盒模型属性（边框、内边距等）
• 防抖函数可以减少滚动事件触发频率，避免性能损耗
• 移除!important强制样式，通过CSS优先级（如#widget.docked）控制样式，提升代码可维护性

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