スクロールしたページの深さに基づいてdivを変更します

Question

スクロールしたページまでの距離に基づいてdiv内のテキストを変更しようとしています。私はjQueryのscrollTopとドキュメントの高さを試してきましたが、これまでのところ希望の結果が得られませんでした。

ページ上の要素の位置を取得し、その要素の位置にスクロールしたら、何かを行うためにjQueryを取得するにはどうすればよいですか？

大変助かりました！

Answer 1

Stackoverflowにも同様の質問があり、これを実現する方法を説明するための小さな例がありました。私は今質問を見つけることができませんが、here is the example。この例では、ページ内の特定の要素にスクロールして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

古き良きppk from quirksmode.orgは、要素の位置を見つける方法をお見せすることができます：「あなたはページのサイズを変更し、スクリプトを実行しますので、もしこのスクリプトは、実際の位置を見つけます再び、それは要素の正しい新しい位置を指し示します。