javascript - 根据浏览器高度为 div 设置动画

Question

当用户在网页上滚动到某个高度时，我想为 DOM 中的某个 div 设置动画，例如 600px。

问题是，我正在浏览谷歌，但我找不到任何关于它的信息——这都是关于缓和的。

谁能帮我这个？我正在查看 jQuery 和 Javascript 文档，但仍然没有骰子。

Answer 1

尝试这个：

var timer;

$(document).scroll(function() {
    clearTimeout(timer);
    timer = setTimeout(function() {
        if ($(document).scrollTop() > 600) {
            $("#myDiv").animate({ height: "100px" });
            $("#myOtherDiv").animate({ width: "225px" });
        }

        if ($(document).scrollTop() > 700) {
            $("#anotherDiv").animate({ height: "300px" });
        }
    }, 100);
});

请注意这里的计时器很重要，否则您最终可能会scroll不必要地处理数千个事件。计时器确保功能在滚动结束后运行。

Answer 2

您可以使用scroll事件（参见：jQuery API - scroll()）来检测滚动并使用scrollTop()（参见：jQUery API - scrollTop()）的值来检查用户滚动了多远以触发进一步的操作。