带固定头部的Scrollify：偏移量未应用于首个区块

嘿，我之前碰到过好几个类似的Scrollify布局冲突场景，你的问题本质是Scrollify默认会强制给每个section设置全屏高度（100vh），和你自定义的「视口高度 - 头部高度」的图片高度逻辑撞车了，给你几个针对性的解决方案：

方案1：让Scrollify放弃强制设置section高度 #

Scrollify有个sectionHeight配置项，直接设为"auto"，就能让section用你自己定义的高度，而不是被插件强制改成全屏。代码示例：

$(function() {
  $.scrollify({
    section : ".section",
    sectionHeight: "auto", // 关键配置：交给自定义样式控制高度
    // 其他你的原有配置（比如滚动速度、 easing 之类的）
  });
});

方案2：动态计算图片高度（适配窗口变化） #

如果不想改Scrollify的全局配置，用JS动态计算并更新图片高度是最稳妥的，还能监听窗口 resize 事件适配响应式：

// 计算并设置图片高度的函数
function setIllustrationHeight() {
  const headerHeight = $('header').outerHeight(); // 拿到头部实际高度
  const viewportHeight = $(window).height();
  $('.section img').height(viewportHeight - headerHeight);
}

// 页面加载时初始化
setIllustrationHeight();
// 窗口大小变化时实时更新
$(window).on('resize', setIllustrationHeight);

// 正常初始化Scrollify
$(function() {
  $.scrollify({
    section : ".section",
    // 你的其他配置
  });
});

方案3：CSS变量 + calc 实现纯样式解决 #

用CSS变量定义头部高度，再结合calc()直接计算图片高度，代码更简洁，还能配合JS处理动态头部高度：

/* 先定义头部高度的CSS变量 */
:root {
  --header-height: 80px; /* 替换成你头部的实际高度 */
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  /* 你的其他头部样式 */
}

.section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--header-height); /* 避免插画被fixed头部遮挡 */
}

.section img {
  height: calc(100vh - var(--header-height));
  width: auto; /* 保持图片比例 */
  max-width: 100%; /* 防止图片超出视口宽度 */
}

如果头部高度是响应式变化的（比如移动端变小），加几行JS动态更新CSS变量就行：

function updateHeaderHeightVar() {
  const headerHeight = $('header').outerHeight();
  document.documentElement.style.setProperty('--header-height', `${headerHeight}px`);
}

updateHeaderHeightVar();
$(window).on('resize', updateHeaderHeightVar);

额外小提示 #

• 可以用浏览器开发者工具查看section元素的样式，看看是不是Scrollify加的默认样式覆盖了你的自定义样式，如果是，就用更具体的CSS选择器或者!important（尽量少用，但紧急情况可以救场）。
• 如果滚动动画出现卡顿，检查每个section的实际高度是否正确，别出现高度塌陷的情况哦。

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