如何让Shopify主题中cart__details元素滚动至页脚前停止

问题现状 #

已通过Chrome控制台对购物车页面的.cart__subtotal-widget元素修改CSS：

• 取消勾选html[dir=ltr] .cart__subtotal-widget { left: 0;}
• 设置以下CSS规则实现滚动跟随：

.cart__subtotal-widget {
  padding: var(--gutter-regular);
  padding-bottom: 50px;
  position: fixed;
  top: 32.25rem;
}

但滚动页面时该组件会覆盖页脚，尝试添加JS但找不到cart.js文件，直接在.liquid文件加代码无效，需通过Chrome控制台实现组件滚动至页脚前停止的效果。

控制台实现方案 #

直接在Chrome控制台执行以下代码即可实现需求：

// 获取目标元素和页脚元素
const subtotalWidget = document.querySelector('.cart__subtotal-widget');
const footer = document.querySelector('footer'); // 若页脚选择器不对，替换为实际页脚的类名或标签

// 计算组件到页脚的安全距离（可根据需求调整，比如设为20px）
const safeMargin = 20;

// 监听滚动事件
window.addEventListener('scroll', () => {
  // 获取页脚的顶部位置
  const footerTop = footer.getBoundingClientRect().top;
  // 获取组件的高度
  const widgetHeight = subtotalWidget.offsetHeight;
  // 计算组件能到达的最大top值（视窗高度 - 组件高度 - 安全距离）
  const maxFixedTop = window.innerHeight - widgetHeight - safeMargin;
  // 计算当组件即将碰到页脚时的临界位置
  const criticalPosition = footerTop - widgetHeight - safeMargin;

  if (criticalPosition < maxFixedTop) {
    // 即将碰到页脚，切换为绝对定位使其停在页脚上方
    subtotalWidget.style.position = 'absolute';
    subtotalWidget.style.top = `${footer.offsetTop - widgetHeight - safeMargin}px`;
  } else {
    // 未到达临界位置，保持固定定位
    subtotalWidget.style.position = 'fixed';
    subtotalWidget.style.top = '32.25rem'; // 还原初始设置的top值
  }
});

注意事项 #

• 若页脚的选择器footer不匹配，需替换为你的主题中页脚实际使用的选择器（比如.site-footer）
• 可根据页面布局调整safeMargin的值，确保组件和页脚之间有合适的间距
• 该代码仅在当前页面会话有效，刷新页面后需重新执行，若需要永久生效，建议找到主题中负责购物车页面的JS文件或在theme.liquid中添加该代码

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