双向滚动时如何使滚动动画起作用（向下和向上）答案

【问题标题】：How to make scroll animation work when you scroll both ways (down AND up)双向滚动时如何使滚动动画起作用（向下和向上）
【发布时间】：2016-09-02 01:57:15
【问题描述】：

我正在尝试在我的网页上制作一个使用 .scroll() 函数触发的小动画。

我的 .js 脚本是：

$(window).scroll(function(){

var s = $(document).scrollTop();

if(s >= 2400)

{
$("#top").animate({
"top":"820px",
"left":"0"
},'linear');
}

})

当我向下滚动时它可以工作，但我希望 ID 为 #top 的元素在我向上滚动后返回到它的原始位置。任何帮助将不胜感激:)

CSS：

#top{   
height:200px;
width:200px;
display:block;
margin-left:auto; 
margin-right:auto;
top: 860px;
position:relative; 
}

【问题讨论】：

在此处提出任何问题之前，请先阅读 SO 的 tour 并学习 how to ask，然后再学习 create a Minimal, Complete, and Verifiable example。你的问题只是说明你没有做任何事情。
$(window).scroll(function(){ your code goes here });
哦。显然，这是我在这里的第一篇文章.. :) 问题是，我真的不知道要添加什么。我没有可以发布的任何 .js 代码，我只是在寻找一些可以检查和学习的脚本。我看到了一些被删除的答案，这可能正是我需要的阅读内容:)
好的，我设法让它工作，但现在我希望它在向上滚动时做相反的事情 - 回到它的位置。已发布代码。

标签： javascript jquery html css

【解决方案1】：

好的，我做到了。有点像。

var line = 2500;
var isMyHeadOpen = false;

$(window).scroll(function(){
var s = $(document).scrollTop();

if(s >= line && !isMyHeadOpen) {
    isMyHeadOpen = true;
    $("#top").animate({
    "top":"840px",
    "left":"0"
    },'linear');
} else if (s < line && isMyHeadOpen) {
    isMyHeadOpen = false;
    $("#top").animate({
    "top":"880px",
    "left":"0"
    },'linear');
}
})

当我滚动到第 2500 行时，动画触发。当我向后滚动时，动画会回到原来的位置。事情是可变线取决于显示器分辨率，所以它应该是动态的，我不知道如何解决这个问题。

【讨论】：