窗口滚动以检测页脚动画

Question

我试图让我的页脚在用户向下滚动时进行动画处理，然后在用户滚动到顶部时进行动画处理。

当您向下滚动时，我的代码似乎适用于页脚动画，但当您返回顶部时却不行。

此外，我尝试将其设置为在您从顶部向下滚动 400 像素时设置动画，但出于某种原因，动画会在您滚动的那一刻发生。

$(function(){
  $(window).scroll(function(){
    if ($(window).scrollTop()<400){
        $("#footer").animate({"bottom" : "0px"}, 3000);
    }else if($(window).scrollTop()>400){
        $("#footer").animate({"bottom" : "-150px"}, 1500);
    }
  });
});

欢迎大家帮忙。

Answer 1

在你的代码中你说

 $(window).scroll(function(){
   if ($(window).scrollTop()<400){
      $("#footer").animate({"bottom" : "0px"}, 3000);

根据您上面的评论 opx 显示页脚。所以这意味着一旦用户开始滚动并且滚动的距离小于 400 像素，页脚就会动画。即：您开始滚动的第一刻。这就是为什么在您滚动的第一刻显示页脚的原因。我认为你需要这样做：

$(function(){
  $(window).scroll(function(){
    if ($(window).scrollTop()<400){
        $("#footer").stop().animate({"bottom" : "-150px"}, 3000);
    }else {
        $("#footer").stop().animate({"bottom" : "0px"}, 1500);
    }
  });
});