Javascript 当用户再次滚动到顶部时，将图像恢复正常

我在屏幕的边缘（右边和左边）有两个静态（html位置：fixed；）图像。当用户从顶部滚动超过100个像素时，这些边缩回50个像素

我想让它们在用户滚动返回顶部时重新出现。我尝试添加布尔值，当它们缩回时为真，当它们需要再次出现时，将其添加到条件中。但它不起作用。为什么?

userHasScrolled = false;

$(document).ready(function(){
 $(window).scroll(function(){
 if ($(window).scrollTop() > 100) {
  $(".rightstatic").animate({marginRight:'-50px'}, 900);
  $(".leftstatic").animate({marginLeft:'-50px'}, 900);
  userHasScrolled = true;
 }
 });
});

if($(window).scrollTop() <= 0 && userHasScrolled) {
  $(".rightstatic").animate({marginRight: '+50px'}, 400);
  $(".leftstatic").animate({marginLeft:'+50px'}, 400);
  userHasScrolled = false;
}

userHasScrolled=false；
$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
如果（$（窗口）.scrollTop（）>100）{
$（“.rightstatic”）.animate（{marginRight:'-50px'}，900）；
$（“.leftstatic”）.animate（{marginLeft:'-50px'}，900）；
userHasScrolled=true；
}
});
});
如果（$（窗口）.scrollTop（）100）{
$（“.rightstatic”）.animate（{marginRight:'-20px'}，900）；
$（“.leftstatic”）.animate（{marginLeft:'-20px'}，900）；
}else if（$（window）.scrollTop（）它不起作用，因为代码的底部只调用了一次，
userHasScrolled
此时为
false
。您需要在
$（window）.scroll（）内同时调用这两个部分
。我认为您可以去掉
userhasscrowled
变量，第二个条件可以是
else
而不是
else if

var scrollTimeout;
var throttle = 250;
$(document).ready(function(){
 $(window).scroll(function(){
   if(scrollTimeout) return;
   scrollTimeout = setTimeout(function() {
     scrollTimeout = null;
     const scrolled = $(this).scrollTop();
     if (scrolled > 100) {
       console.log("1");
       $(".rightstatic").animate({marginRight:'-20px'}, 900);
       $(".leftstatic").animate({marginLeft:'-20px'}, 900);
     } else {
       console.log("2");
       $(".rightstatic").animate({marginRight: '+0px'}, 400);
       $(".leftstatic").animate({marginLeft:'+0px'}, 400);
     }
   }, throttle);
 });
});

小提琴：
编辑：
它没有按预期工作，因为一次鼠标滚轮交互触发了多次（数十次）事件，导致调用jQuery animate的次数远远超过了它需要的次数。解决此问题的常用方法是“限制”除非经过一定时间，否则不能调用的函数。在上面编辑的代码中，我们将超时定义为
250ms
，这意味着我们的滚动处理程序代码每秒最多调用4次，而不是更多（与100毫秒内的30次相比，这是一个很大的差异，这是性能上的巨大改进）。以上只是节流功能的一个简单实现-。
它不起作用，因为代码的底部只调用了一次，
userHasScrolled
此时为
false
。您需要在
$（窗口）内将两者结合起来。滚动（）
。我认为您可以去掉
userhasscrowled
变量，第二个条件可以是
else
而不是
else if

var scrollTimeout;
var throttle = 250;
$(document).ready(function(){
 $(window).scroll(function(){
   if(scrollTimeout) return;
   scrollTimeout = setTimeout(function() {
     scrollTimeout = null;
     const scrolled = $(this).scrollTop();
     if (scrolled > 100) {
       console.log("1");
       $(".rightstatic").animate({marginRight:'-20px'}, 900);
       $(".leftstatic").animate({marginLeft:'-20px'}, 900);
     } else {
       console.log("2");
       $(".rightstatic").animate({marginRight: '+0px'}, 400);
       $(".leftstatic").animate({marginLeft:'+0px'}, 400);
     }
   }, throttle);
 });
});

小提琴：
编辑：
它没有按预期工作，因为一次鼠标滚轮交互触发了多次（数十次）事件，导致调用jQuery animate的次数远远超过了它需要的次数。解决此问题的常用方法是“限制”除非经过一定时间，否则不能调用的函数。在上面编辑的代码中，我们将超时定义为
250ms
，这意味着我们的滚动处理程序代码每秒最多调用4次，而不是更多（与100毫秒内的30次相比，这是一个很大的差异，这是性能上的巨大改进）.以上只是节流功能的一个简单实现-.
尝试了else if，但没有它。边缘不会缩回。知道为什么吗？你能创建一个小提琴或任何实例，让我们可以进行研究吗？我希望我做得对。似乎做得对（它现在延迟了！）我们需要限制滚动功能。你知道一个简单的方法吗？用else if试过，没有它。边缘不会缩回。知道为什么吗？你能创建一个小提琴或任何实例，让我们可以在上面工作吗？我希望我做得对。似乎这样做是对的（它现在被推迟了！）我们需要控制滚动功能你知道一个简单的方法吗？