Question

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

当用户滚动回到顶部时，我希望他们重新出现（正常时再次正常）。我尝试添加布尔值，当它们缩回时为true，并在需要再次出现时将其添加到条件中。但它没有用。为什么呢？

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;
}

修改

$(document).ready(function(){
 $(window).scroll(function(){
   if ($(window).scrollTop() > 100) {
     $(".rightstatic").animate({marginRight:'-20px'}, 900);
     $(".leftstatic").animate({marginLeft:'-20px'}, 900);
   } else if($(window).scrollTop() <= 0) {
     $(".rightstatic").animate({marginRight: '+0px'}, 400);
     $(".leftstatic").animate({marginLeft:'+0px'}, 400);
   }
 });
});

它有点工作，但有一个巨大的延迟。就像到达顶部后一分多钟一样，它会缩回。

编辑2：限制后终于可以使用了。谢谢@TomaszBubała。

Answer 1

它不起作用，因为代码的底部只被调用一次，而userHasScrolled到那时是false。您需要在$(window).scroll()内合并两者。我认为你可以摆脱userHasScrolled变量，第二个条件可能只是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);
 });
});

小提琴：https://jsfiddle.net/wctxbynt/41/

编辑：

由于使用单个鼠标滚轮交互多次（数次）scroll事件被触发，因此无法正常工作，导致jQuery动画被调用的次数远远超过其需要的次数。解决此问题的常用方法是“限制”除非经过一定时间后才调用的函数。在上面编辑的代码中，我们将超时定义为250ms，这意味着我们的滚动处理程序代码将被调用最多4次 - 而不是更多（大差异，而不是ex。30在100ms的时间，这是性能的巨大改善）。以上只是节流功能的简单实现 - read more about throttling here。

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

1 个答案:

小提琴：https://jsfiddle.net/wctxbynt/41/

编辑：