jQuery:滚动后恢复为默认值

Question

我创建了一个固定在页面底部的页脚。当用户向下滚动时，页脚边距底部更改为 20px，颜色从黑色变为白色。在这里，我使用了以下 jQuery:

 $(document).ready(function() {
        $(window).scroll(function() {
            var $this = $(this);
            if ($this.scrollTop() >= 10) {
                $("footer").animate({
                    marginBottom: "30px",
                    backgroundColor: "fff"
                }, 2000);
            }
        });
});

当用户滚动回顶部时，页脚应返回到屏幕底部，颜色应再次从白色变为黑色。我尝试使用 else 语句，但没有成功。

找到它:

$(document).ready(function() {
 $( window ).scroll(function() {
  var $this = $(this);
   if ($this.scrollTop() <= 5) {
   $("footer").stop().animate({marginBottom: "0px", color: "fff", backgroundColor: "000"}, 1000);
   } else if ($this.scrollTop() >= 5) {
   $("footer").stop().animate({marginBottom: "30px", color: "000", backgroundColor: "fff"}, 1000);
        } 
    });
});

Answer 1

如果可行，试试这个:

.footerback{
      margin-bottom:0;
      background-color:#000000;
    }

$(document).ready(function() {
    $(window).scroll(function() {
        var $this = $(this);
        if ($this.scrollTop() >= 10) {
            $("footer").animate({
                marginBottom: "30px",
                backgroundColor: "fff"
            }, 2000);
        }
       else{
        $("footer").addClass("footerback");
       }
    });
});