javascript - 根据您滚动页面的距离更改 div

Question

我正在尝试根据您滚动页面的距离来更改 div 内的文本。我一直在修改 jQuery 的 scrollTop 和文档高度，但到目前为止未能产生预期的结果。

一旦滚动到该元素位置，我将如何获取页面上元素的位置，然后让 jQuery 执行某些操作？

非常感谢您的帮助！

Answer 1

Stackoverflow 上有一个问题，问了类似的问题，我举了一个小例子来说明如何实现这一点。我现在找不到问题，但这 是示例。在此示例中，会显示一个 div，直到您滚动到页面中的某个元素，此时该 div 被隐藏。你可以改变它来实现你想要的，因为想法是一样的。这是根据您的需要修改的代码：

$(document).ready(function() {
    function isScrolledIntoView(elem) {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();

        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();

        return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
    }

    var myelement = $('#formcontainer'); // the element to act on if viewable
    $(window).scroll(function() {
        if(isScrolledIntoView(myelement)) {
            // do something when element is scrolled to and viewable
        } else {
            // do something when element is not viewable
        }
    });
});

Answer 2

来自 quirksmode.org 的好旧ppk可以向您展示如何找到元素的位置：“此脚本找到实际位置，因此如果您调整页面大小并再次运行脚本，它会指向元素的正确新位置。 "