javascript - 在滚动时更改边距顶部（动画）

Question

感谢用户 Rex，我现在使用以下代码通过动画效果更改滚动边距。

$(document).scroll(function () {
$("#content").animate({margin: "0px 0px 0px 0px"}, 3000);
});

现在，当我向上滚动时，我希望具有相同的效果，即边距恢复到原始状态，我使用以下脚本进行了尝试，该脚本检测到向上或向下滚动但它不起作用：http://jsfiddle。 net/qSe4e/14 （警报消息帮助我向我展示滚动检测脚本是否有效）

希望有人可以帮助我

解决方案：

http://jsfiddle.net/qSe4e/15/

score 0 · Accepted Answer

编辑：

这个答案是指这个jsfiddle：http: //jsfiddle.net/qSe4e/14

结束编辑。

在 jsfiddle 中，您正在为窗口的滚动事件注册一个处理程序，它说“当窗口滚动时，为文档滚动事件注册一个处理程序”，这一切都搞砸了。所以你的代码看起来像这样：

$(document).scroll(function () {
  $("#three").animate({margin: "0px 0px 0px 0px"}, 3000);
});

真的应该是这样的：

$("#three").animate({margin: "0px 0px 0px 0px"}, 3000);

基本上只需删除文档滚动包装。

然后，第二个问题是 jQuery 会自动为您排队这些动画，因此当您滚动时它们会被延迟。你会得到一个更好的结果，如下所示：

$("#three").animate({margin: "0px 0px 0px 0px"}, {queue: false, duration: 3000});

在您的小提琴中进行这些更改，看看您会得到什么。

1 回答 1