Javascript 为什么我的Jquery是；动画化；仅触发一次，而不是每次触发功能？

我将导航停靠在视口顶部的特定文档高度，停靠时，它有一个下拉动画

$（文档）。滚动（函数（）{
var x=$（window.scrollTop（）；
如果（x>=700）{
$（“标题”）.addClass（“修复”）；
if（$（“header”）.hasClass（“fix”））{
$（“header”）.animate（{top:'0'}，500）；
}
$（“main”）.css（“填充顶部”、“100px”）；
}
如果（x您可以使用纯CSS执行此操作：

header {  
  top: -100px;
  transition: top .5s;
}

header.fix{
  width:100%;
  position:fixed; 
  top: 0;
}

只需从js中删除
animate
调用

编辑：这里有一个
作为使用CSS转换的@sklingler93的答案似乎是最好的方法，OP的答案是：

由于滚动事件会多次触发该函数，因此您应该
在
.animate（…）
之前使用
.stop（）
，确保不将动画排队
您忘记删除
if=700）中标题的样式属性{
$（“标题”）.addClass（“修复”）；
$（“标题”）.stop（）.animate({
顶部：“0”
}, 500);
$（“main”）.css（“填充顶部”、“100px”）；
}
如果（x我认为在这个片段中

if(x>=(a-100)){
  $("header").addClass("fix");
  if($("header").hasClass("fix")){
    $("header").animate({top: '0'},500);
  }
  $("main").css("padding-top", "100px");
}

$（“header”）.addClass（“fix”）；
应该在
if（$（“header”）.hasClass（“fix”）
中
可能
$（“main”）.css（“padding top”，“100px”）；
也应该在
的内部，如果
也在里面

如果
表达式，则应否定

这样你就可以：

if(x>=(a-100))
{
  if(!$("header").hasClass("fix"))
  {
    $("header").addClass("fix");
    $("header").animate({top: '0'},500);
    $("main").css("padding-top", "100px");
  }
}

对我来说更有意义

此外，当滚动条回到顶部时，必须清除动画应用的所有样式

希望有帮助。
在没有任何测试的第一次查看中，我怀疑这是
$（“main”）.css（“padding top”，“100px”）
如果在第一个选项中添加，那么在第二个选项中是否应该删除它？是的，它必须添加和删除，因为标题是位置相关的，我希望它与内容一起上升，稍后再回来。我已经删除了这个填充，但它不起作用，您可以在JSFIDLE中自己测试它，这样您就知道它不会修复问题。为什么你要添加补丁，然后立即测试补丁？这有什么意义？你没有将内联样式重置回默认值。Erik，你是什么意思？JSFIDLE会帮我更多，我不明白css的目标是什么。我已经添加了一个链接到FIDLE。
transition
属性告诉浏览器当
top
 属性更改，它应该是动画。因此添加
fix
类会导致
top
更改并平滑地动画inOHH！我现在明白了，我从来没有这样想过，哇，你睁开我的眼睛！谢谢你，伙计！和Felypp写的一样：有人介意评论否决票吗？这样更好。。。
if(x>=(a-100))
{
  if(!$("header").hasClass("fix"))
  {
    $("header").addClass("fix");
    $("header").animate({top: '0'},500);
    $("main").css("padding-top", "100px");
  }
}