ウィンドウの高さにもかかわらずページ上部からスクロールの距離を保持

Question

ページの上部からスクロール位置に基づいてページの背景色を変更していますが、高さに関係なくすべての色を循環させたい窓。私が現在行っているのは、スクロールがページの上から来るピクセル数に厳密に基づいていますが、ウィンドウの高さに依存していることがわかります。ブラウザをサイズ変更しても、すべての色を常にスクロールできるようにするには、これをどのように変更できますか？ http://jsfiddle.net/keith/P7ER3/

Answer 1

あなたがwindow.outerHeightとwindow.pageYOffset間percent differenceを使用することができます。私はこれまで持って何

。

window.outerHeight // the pixel height of the browser's frame. 

    window.innerHeight // the pixel height of the document within the browser's frame. 

    window.pageYOffset // reflects the current vertical pixel 
         // location of the top-left corner of the document. 

---

var perDiff = window.pageYOffset/(window.outerHeight + window.innerHeight); 

    perDiff; // 0 when the scroll is on the top 

    perDiff; // 1 when the scroll is on the bottom of the page 

代わりのposition、あなたは常にそれから新しい色を計算するために、0と1の間になりますperDiff値を、使用することができます。

P.S. jsfiddleでは、perDiffはフレームの高さではなく、ドキュメントの高さを参照するため、このコードは動作しません。

Answer 2

このライン変更してみてください：これに

scroll_pos = $(document).scrollTop(); 

を：あなたが800ピクセルを超えてスクロールすると

scroll_pos = $(document).scrollTop() % 800; 

位置モジュロ800を取るには、基本的にゼロに戻ってそれをリセットします。

Answer 3

これは、ドキュメントの高さ：$(document).height()

、これはビューポートのheiptある：両方の値の$(window).height()

差が（正場合）下にスクロールすることができる画素の最大数を返します。

：

var max_scroll = $(document).height() - $(window).height(); 

最後に、これは、スクロール量を反映して、0と1の間nuberを返します。

あなたはこのスクロールアマウントを使用できます。このスクロールアマウントを使用すると、新しいスクロールアサインから新しいカラーを計算するために常に0と1の間になります。