scrollTopの値が実際のピクセルと相関しない

Question

JavaScriptのscrollTopプロパティに問題があり、誰かが助けてくれることを望んでいました。 MDNによれば、値はピクセルオフセットに対応しており、これは意味をなさない。私が問題を抱えているのは、それが単純ではないように見えるという事実です。 http://codepen.io/anon/pen/vGJZMV

スクロール時にヘッダーが一定のポイントまで縮小されて停止する縮小ヘッダーエフェクトを作成したいとします。十分にシンプルに聞こえます（そうすべきです）。スクロール可能な要素の 'scroll'イベントを聴いていて、最大ヘッダーの高さから値を減算しています。私は、私の心の中で、スクロール可能領域とヘッダーの間に起こる視差スクロール効果はないはずです（私の例では、はっきりしていますが）。何か案は？

EDIT： 問題をより明確にするために、ヘッダーが最小の高さになるまでテキストがヘッダーの後ろにならないように、ヘッダーをスクロールするのと同じ割合で縮小します。今のように、コンテンツボックスの垂直方向の翻訳は、スクロールと翻訳の両方のため、効果的にテキストをscrollTop値の2倍の速さで移動させます。

Answer 1

実際の問題（テキストコンテナがスクロールしている間に縦に並んでいる）を認識した後、スクロール量でコンテンツコンテナの上部をパディングしてテキストを押し下げて解決できました。容器の垂直方向の動き。

http://codepen.io/sunny-mittal/pen/LNjgEK

前のコードに関連する変更はアスタリスクで囲まれている：

header.on 'scrolling' (_, howmuch) -> 
    if howmuch is 0 
    header.css 'height' 150 
    **content.css 'padding-top' 0** 
    else if howmuch >= 50 
    header.css 'height' 100 
    **content.css 'padding-top' 50** 
    else 
    header.css 'height' 150 - howmuch 
    **content.css 'padding-top' howmuch** 

Answer 2

「視差スクロール効果」とは、ヘッダーがコンテンツのスクロールよりも遅く縮んだ場合、CSSが原因であることを意味します。あなたのCSSには、headerのtransition all 0.3s easeという行があります。つまり、すべてのプロパティに変更がすぐには適用されず、イージングで0.3秒間「アニメーション化」されます。 headerの高さを変更するたびに、残りの世界で何が起きているかにかかわらず、0.3秒かかるでしょう。

この行を削除すると、headerはcontentと同じ率で縮小する必要があります。