向下滚动时头部高度可正常获取 向上滚动时获取失效问题求助

问题根因 #

你的头部.header-outer设置了transition: all .4s ease过渡动画，原有JS逻辑的执行顺序存在问题：

• 当滚动回顶部触发else分支时，你先移除了show类，立刻就读取头部高度，此时过渡动画还未启动，拿到的仍是头部缩小后的高度，设置给.main的margin-top自然是错误的，后续头部完成展开动画后也不会再同步更新margin值。

最优解决方案（纯CSS控制，无需动态计算高度） #

这种方案逻辑最简单、性能最高，完全避免动画同步问题：

1. CSS新增/修改以下代码 #

/* 用CSS变量统一管理高度，后续修改只需改这两个值即可全局同步 */
:root {
  --header-normal-height: 243px; /* 对应头部默认展开高度：43px logo高度 + 上下各100px padding */
  --header-small-height: 103px; /* 对应头部缩小后高度：43px logo高度 + 上下各30px padding */
}

.main {
  /* 保留原有样式，新增默认margin */
  margin-top: var(--header-normal-height);
}

/* 头部缩小时同步修改内容区margin */
.header-outer.show + .main {
  margin-top: var(--header-small-height);
}

2. JS简化为只切换类即可 #

$(window).on("scroll", function() {
  const scrollTop = $(document).scrollTop();
  $('.header-outer').toggleClass('show', scrollTop > 1);
});

保留动态计算高度的修改方案 #

如果你需要动态适配头部高度（比如后续头部内容可能变化），可以监听头部过渡结束事件再同步margin：

// 初始化设置默认margin
$('.main').css('margin-top', $('.header-outer').height() + 'px');

// 监听头部过渡结束，同步更新最新高度到margin
$('.header-outer').on('transitionend', function() {
  $('.main').css('margin-top', $(this).height() + 'px');
});

$(window).on("scroll", function() {
  const scrollTop = $(document).scrollTop();
  $('.header-outer').toggleClass('show', scrollTop > 1);
});

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