Question

我正在尝试在我的网页上制作一个使用.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; 
}

Answer 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行时，动画会触发。当我向后滚动时，动画会移回原始位置。事情是变量线取决于显示器分辨率所以它应该以某种方式是动态的，我不知道如何解决它。

双向滚动时如何使滚动动画工作（向下和向上）

1 个答案: