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

Question

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

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

任何人都可以帮我吗？我正在查看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()）来检查用户的距离已滚动以触发进一步操作。