如何实现向下滚动页面时文章容器向上移动的交互效果

• 语法错误导致样式不生效：JS中拼接top属性值时，数值和px单位之间多了空格，最终生成的样式值类似80 px，属于非法CSS值，浏览器会直接忽略该样式。
• 计算基准硬编码适配性差：CSS中容器初始top使用的是视口相对单位35vh，但JS中写死了378px作为计算起点，不同分辨率下35vh对应的实际像素值不固定，会导致初始位置偏移、滚动位移计算完全错位。
• 未做边界值限制：当页面滚动距离超过初始top值时，计算出的top会变为负数且持续减小，文章容器会直接滚动到视口外消失，不符合正常阅读逻辑。
• 背景图定位失效：.article-image设置了绝对定位，但父容器main默认是static定位，图片会相对于整个文档定位，无法固定在首屏作为背景，滚动时图片会跟着文档流移动。
• 层叠属性取值非法：.article-image设置的z-index: 0.9不符合规范，z-index只接受整数值，该设置会被浏览器忽略，可能导致图文层叠顺序错乱。
• 滚动事件无性能优化：scroll事件触发频率极高，未做节流或帧同步优化的情况下，频繁修改DOM样式会触发大量重排，导致页面滚动卡顿。
• 细节样式错误：.article-description的字号设置1.2 rem在数值和单位间多了空格，该字号样式会失效。

1. 调整CSS样式 #

/* 全局默认样式重置，避免浏览器默认边距影响布局 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
main{
  position: relative; /* 给绝对定位的背景图提供定位基准 */
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 200vh; /* 预留足够滚动高度，保证交互正常触发 */
}

.article-image{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 85vh;
  object-fit: cover; /* 保证图片不变形铺满首屏 */
  opacity: 0.9;
}

.article-container{
  width: 50%;
  position: relative;
  top: 35vh;
  z-index:1;
  background-color: white;
  min-height: 50vh;
  padding: 30px;
  color: #1A2434;
  -webkit-box-shadow: 0px 0px 15px 5px #1A2434 ; 
  box-shadow: 0px 0px 15px 5px #1A2434 ;
}

.article-container h1{
  font-size: 3rem;
}

.article-container .date{
  font-size: 0.8rem;
  padding-top: 4vh;
  font-family: 'Zona Pro Thin';
  color: rgba(0, 0, 0, 0.5);
}

.article-container .article-description{
  font-size: 1.2rem; /* 修正原代码数值与单位间的多余空格 */
  padding-top: 4vh;
  font-family: 'Zona Pro Thin';
  color:#1a2434d0;
  font-weight: bolder;
}

2. 修正JS交互逻辑 #

const container = document.getElementById('article-container');
// 动态获取容器初始top的实际像素值，适配不同屏幕尺寸，不硬编码数值
const initialTop = container.getBoundingClientRect().top + window.scrollY;
let ticking = false;

function updateContainerPosition() {
  const scrollY = window.scrollY;
  let targetTop = initialTop - scrollY;
  // 增加边界限制，top最小为0，避免容器滚动到视口外上方消失
  targetTop = Math.max(targetTop, 0);
  container.style.top = `${targetTop}px`; // 去掉数值与px间的多余空格
  ticking = false;
}

// 用requestAnimationFrame做帧同步优化，避免高频触发重排导致卡顿
window.addEventListener('scroll', () => {
  if (!ticking) {
    window.requestAnimationFrame(updateContainerPosition);
    ticking = true;
  }
});

// 页面首次加载时初始化一次容器位置
updateContainerPosition();

补充优化：如果需要适配长文章阅读，可以在targetTop等于0时给容器增加固定定位逻辑，让容器贴顶后不再随滚动移动，符合常规文章页阅读习惯。

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