Javascript 允许在滚动动画期间更改元素高度

有一个JS/JQuery问题我正在努力解决

我正在构建一个简单的单页网站，带有固定的标题和基于锚的滚动导航。当用户单击链接时，主体的滚动顶部将设置为相关部分顶部的动画。此函数包含一个计算，该计算从滚动距离中减去收割台的高度，以确保固定收割台不会遮挡节的顶部

我遇到的问题是因为有一个单独的函数，如果用户滚动超过一定距离，它会将一个类应用于标题。此类会导致一些属性发生更改，因此header元素的高度也会发生更改

这意味着

$（'header'）.outerHeight（）的值小于动画开始时的大小。这一变化意味着滚动的距离是错误的，窗口结束时稍微短于所需的位置

如何在滚动动画期间允许此值更改？理想情况下，我希望一切都保持动态，而不是指定固定的高度/大小。蒂亚


$（'a[href^=“#“]”）。在（“单击”，函数（）上）{
让headerHeight=$（'header'）.outerHeight（）；
$（'html，body'）。设置动画({
scrollTop:$（$.attr（this，'href'））.offset（）.top-headerHeight
}, 500);
});
$（窗口）。在（'load resize scroll'，function（）上{
如果（$（window）.scrollTop（）>=100）{//这指的是窗口
$（'header'）.addClass（'scroll'）；
}否则{
$（'header'）.removeClass（'scroll'）；
}
});
body，html{
保证金：0；
填充：0；
}
标题{
填充：30px 30px；
位置：固定；
左：0；
右：0；
排名：0；
z指数：99；
过渡：全部。3秒轻松；
}
收割台h1{
显示：内联块；
宽度：10%；
颜色：白色；
}
标题.滚动{
背景：黑色；
填充：15px 30px；
}
标题导航{
显示：内联块；
宽度：89%；
}
标题导航ul{
保证金：0；
列表样式：无；
文本对齐：右对齐；
}
标题nav ul li{
显示：内联块；
}
标题nav ul li a{
颜色：白色；
填充：0 10px；
}
.英雄{
高度：600px；
背景：蓝色；
}
第h2节{
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
保证金：0；
文本对齐：居中；
颜色：白色；
}
部分{
高度：600px；
}
#一个{
背景：红色；
}
#两个{
背景：绿色；
}
#三{
背景：橙色；
}

标题





英雄
第一节
第二节
第3节试试这个，我从收割台的高度中减去30，因为开始填充是“30px 30px”，然后它将是“15px 30px”，这意味着收割台的高度应该是：
高度=实际高度--，
当你们的标题被展开时，这是必需的（意味着标题并没有类滚动），所以我添加了条件


$（'a[href^=“#“]”）。在（“单击”，函数（）上）{
让headerHeight=$（'header'）.outerHeight（）；
if（！$（'header'）.hasClass（'scroll'））{
人头高度-=30；//已移除衬垫
}
$（'html，body'）。设置动画({
scrollTop:$（$.attr（this，'href'））.offset（）.top-headerHeight
}, 500);
});
$（窗口）。在（'load resize scroll'，function（）上{
如果（$（window）.scrollTop（）>=100）{//这指的是窗口
$（'header'）.addClass（'scroll'）；
}否则{
$（'header'）.removeClass（'scroll'）；
}
});
body，html{
保证金：0；
填充：0；
}
标题{
填充：30px 30px；
位置：固定；
左：0；
右：0；
排名：0；
z指数：99；
过渡：全部。3秒轻松；
}
收割台h1{
显示：内联块；
宽度：10%；
颜色：白色；
}
标题.滚动{
背景：黑色；
填充：15px 30px；
}
标题导航{
显示：内联块；
宽度：89%；
}
标题导航ul{
保证金：0；
列表样式：无；
文本对齐：右对齐；
}
标题nav ul li{
显示：内联块；
}
标题nav ul li a{
颜色：白色；
填充：0 10px；
}
.英雄{
高度：600px；
背景：蓝色；
}
第h2节{
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
保证金：0；
文本对齐：居中；
颜色：白色；
}
部分{
高度：600px；
}
#一个{
背景：红色；
}
#两个{
背景：绿色；
}
#三{
背景：橙色；
}

标题





英雄
第一节
第二节
第3节通过向我的动画函数添加一个回调来解决这个问题。回调函数检查自第一次调用函数以来标头的高度是否已更改，如果已更改，则scrollTop将增加此数量

$('a[href^="#"]').on("click", function() {

  let headerHeightOne = $('header').outerHeight();

  $('html, body').animate({
    scrollTop: $($.attr(this, 'href')).offset().top - headerHeightOne
  }, 500, function() {
    let headerHeightTwo = $('header').outerHeight();
    let difference =  headerHeightOne - headerHeightTwo;

    if (difference > 0 ) {
      $('html,body').animate({
          scrollTop: $(window).scrollTop() + difference
      }, 100);
    }
  });
});

您添加的代码段不起作用。@Prawinsoni它不是一个有效的示例，只是为了展示我的各种代码，抱歉。我已经修改了这个问题来反映这一点。谢谢你，但我已经知道为什么会发生这种情况，我需要的是一种考虑到变化的方式。它还需要是动态的，而不是硬编码的，因为填充将在不同的屏幕大小之间变化。您将如何使标题填充动态？您可以使用相同的登录名来计算高度。标题填充将在断点之间更改，这意味着在JS中也会不断更新计算。我觉得这是一个解决办法，因为你要滚动两次，这不是一个提高性能的好主意。我不明白，如果更改收割台高度的逻辑在你手中，为什么你不能直接使用它。我已经解释了多次，我不想硬编码该值，因为随着尺寸的变化，它将不得不反复重新计算。它也将只在第一个滚动动画上工作，因为在此之后，更改被触发。一旦触发该更改，收割台高度将降低，这意味着现在需要删除计算。这意味着我必须编写更多的函数和条件来实现这一点，而上面的解决方案要简单得多。