Javascript jQuery没有'；不显示和隐藏标题

我试图在页面的某个位置创建一个标题。 因此，我要做的是检查滚动到页面顶部以及元素的顶部偏移量，在该偏移量之后应该显示标题。如果scrollTop大于偏移量，则显示标题，否则它将消失

但是！当我滚动到该位置时，标题位置在

top:-13%

和

top:-12.99998%

之间不断切换。过了一段时间，它终于显示了标题，但它从未消失

我做错了什么

---

JSFiddle:

我认为问题在于.animate（）函数一直在运行，导致动画在结束前“重新启动”

这并不是最漂亮的解决方案，但仅仅添加一个控制函数执行的标志和一个超时来减少处理程序的运行频率就可以解决问题

---

你的逻辑全乱了。基本上，您希望确保仅在绝对需要时才进行动画制作-不多也不少。既然滚动事件发生了数百次。。。用户滚动时不断快速启动。。。您希望确保在每个滚动事件期间所做的工作量尽可能少。这尤其意味着，如果不需要的话，您不希望在每个滚动事件上查询DOM（ps.

$（'selector'）

是一个DOM查询）。看看这把小提琴：

---

您看到的问题是，每次调用

滚动

事件时，动画都会排队。如果等待足够长的时间，您可以看到将top设置为0的动画实际上可以工作

在尝试运行另一个动画之前，可以使用

stop（）

函数停止所有动画

像这样的

if (height > offset) {
   $(".floating-header").stop().show().animate({
     top: "0"
   }, 700);
} else {
   $(".floating-header").stop().animate({
     top: "-13%"
   }, 700);
}

我可以建议的几个改进是

• 取消滚动事件处理程序的盎司

• 排队动画之前，请检查标头的当前状态。i、 e.如果已经隐藏，不要试图隐藏，反之亦然

---

由于受到干扰，我似乎是最后一个参加聚会的人，但既然是我写的，我将把答案发到FWIW
你需要消除你的代码。这是一个简单的系统，但也建议进行研究

var$m1=$（'m1'），$m2=$（'m2'）//仅测试
var$win=$（窗口），$page2=$（“#page2”），$hdr=$（“.floating header”）；
var$offset=$page2.offset（）.top；
var hvis=假，curpos；
$win.scroll（函数（）{
curpos=$win.scrollTop（）；
$m1.html（curpos）；//仅测试
$m2.html（$offset）；//仅测试
如果（curpos>$offset）{
如果（！hvis）{
hvis=真；
//$m1.html（curpos）；
$hdr.finish（）.animate({
顶部：“0”
}, 700);
}
}否则{
如果（hvis）{
$hdr.finish（）.animate({
顶部：“-60px”
}, 700);
hvis=假；
}
}
});
html，
身体{
高度：100vh；
宽度：100vw；
}
#第1页，
#第2页，
#第3页{
身高：100%；
宽度：100%；
背景色：#fff；
}
.浮动收割台{
位置：固定；
顶部：-60px；
背景色：#000；
宽度：100%；
高度：60px；
}
.msg{位置：固定；底部：10px；高度：30px；宽度：80px；文本对齐：中心；}
.msg{填充顶部：10px；}
#m1{左：3px；边框：1px实心橙色；背景：小麦；}
#m2{右：3px；边框：1px纯绿色；背景：淡绿色；}

标题
第1页

第2页

第3页

检查此@DaniP谢谢！它可以工作，但它不是我需要的动画。事实上，我正在使用放松来让它看起来更好。所以我猜
slideUp（）
和
slideDown（）
对我来说不起作用。有什么方法可以让我的代码工作吗？你可以尝试用fadeIn/Out（）之类的东西来替换slideUp/Down（）。Jquery有很多不同的动画，你可以试试。谢谢！小提琴不知什么原因打不开。你能更新链接吗？非常感谢！我用了你列出的所有东西。现在效果很好。
if (height > offset) {
   $(".floating-header").stop().show().animate({
     top: "0"
   }, 700);
} else {
   $(".floating-header").stop().animate({
     top: "-13%"
   }, 700);
}