如何在滚动时切换Div头部？黑白背景网站实现带过渡的translateY效果

嘿，我来帮你搞定这个黑白背景切换时头部的平滑过渡效果！你的思路方向是对的，我们可以通过监听滚动事件，结合CSS过渡和transform来实现自然的切换效果，下面是完整的实现方案：

1. 核心逻辑梳理 #

• 当滚动到黑色背景区域时，通过translateY实现两个头部（白色/黑色）的位移替换
• 在过渡区域（即将进入/离开黑色背景的区间），计算滚动位置与黑色区域的重叠比例，用这个比例控制位移和透明度的渐变，避免生硬切换

2. 完整代码实现 #

HTML结构 #

先搭建基础页面结构，包含两个切换用的头部元素和黑白背景区块：

<header class="site-header">
  <div class="logo logo-white">白色Logo</div>
  <div class="logo logo-black">黑色Logo</div>
</header>

<section class="white-section">白色背景区域</section>
<section class="black-section">黑色背景区域</section>
<section class="white-section">又一个白色背景区域</section>

CSS样式 #

给头部固定定位，让两个Logo重叠放置，并添加入退场的过渡动画：

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  z-index: 999;
  /* 确保头部始终在页面最上层 */
}

.logo {
  position: absolute;
  top: 0;
  left: 20px;
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  /* 添加入退场的过渡动画，让变化更自然 */
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.logo-white {
  color: white;
  /* 实际项目中替换为你的白色Logo图片 */
  transform: translateY(0);
  opacity: 1;
}

.logo-black {
  color: black;
  /* 实际项目中替换为你的黑色Logo图片 */
  transform: translateY(-100%);
  opacity: 0;
}

/* 页面区块样式，模拟黑白背景 */
.white-section, .black-section {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.white-section {
  background-color: #fff;
}

.black-section {
  background-color: #000;
  color: #fff;
}

JavaScript逻辑 #

完善你的headerEffect函数，加入过渡区域的平滑计算逻辑：

function headerEffect() {
  const winScroll = $(window).scrollTop();
  const blackSection = $('.black-section');
  const blackTop = blackSection.offset().top;
  const blackHeight = blackSection.outerHeight();
  const logoWhite = $('.logo-white');
  const logoBlack = $('.logo-black');
  const headerHeight = $('.site-header').outerHeight();
  
  // 计算过渡区域的起始和结束点：提前头部高度开始过渡，到黑色区域底部结束
  const transitionStart = blackTop - headerHeight;
  const transitionEnd = blackTop + blackHeight;
  
  if (winScroll < transitionStart) {
    // 在黑色区域上方：显示白色Logo，隐藏黑色Logo
    logoWhite.css({
      'transform': 'translateY(0)',
      'opacity': 1
    });
    logoBlack.css({
      'transform': 'translateY(-100%)',
      'opacity': 0
    });
  } else if (winScroll > transitionEnd) {
    // 在黑色区域下方：显示黑色Logo，隐藏白色Logo
    logoWhite.css({
      'transform': 'translateY(100%)',
      'opacity': 0
    });
    logoBlack.css({
      'transform': 'translateY(0)',
      'opacity': 1
    });
  } else {
    // 在过渡区域内：计算进度值（0-1），控制两个Logo的渐变效果
    const progress = (winScroll - transitionStart) / (blackHeight + headerHeight);
    
    logoWhite.css({
      'transform': `translateY(${progress * 100}%)`,
      'opacity': 1 - progress
    });
    logoBlack.css({
      'transform': `translateY(${(progress - 1) * 100}%)`,
      'opacity': progress
    });
  }
}

// 监听滚动和页面加载事件，确保初始状态和滚动时都能触发效果
$(window).on('scroll load', headerEffect);

3. 关键细节说明 #

• 提前过渡：设置transitionStart = blackTop - headerHeight，让切换在进入黑色区域前就开始，避免视觉突兀
• 进度驱动渐变：用滚动位置算出0-1的进度值，同步控制位移和透明度，实现丝滑的过渡效果
• CSS过渡兜底：给Logo添加transition属性，让所有变化都带有平滑动画，不需要手动写帧动画
• 初始状态保障：监听load事件，确保页面刚加载时就能应用正确的头部状态

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