スクロールしたページの距離に基づいて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 は、位置を見つける方法を示すことができます。要素の：＆quot;このスクリプトは実際の位置を見つけるため、ページのサイズを変更してスクリプトを再度実行すると、要素の正しい新しい位置を指します。＆quot;