4

パーセント数（0.0-2.0 / 0％-200％）を計算して、divが表示されたり表示されなくなったりするときに不透明度を変更できるようにしています。

  • ウィンドウが表示可能領域の上にある場合、パーセントは0以下です
  • ウィンドウが表示可能領域の正確な中心にある場合、パーセントは1.0です。
  • また、ウィンドウが表示可能領域の下にある場合、パーセントは2.0以上です。

そして、ビューの内外にスクロールしている間、それはその一部になります。

どういうわけか、ウィンドウの垂直方向の中心を領域の垂直方向の中心と比較する必要がありますが、計算を正しく行うのに苦労しています。

これまでのところ私は

var p = {
    scrollTop: $(window).scrollTop(),
    documentHeight: $(document).height(),
    windowHeight: $(window).height(),
    contentTop: $('.content').position().top,
    contentHeight: $('.content').height()
};

if (p.windowHeight / 2 + p.scrollTop < p.contentHeight / 2 + p.contentTop) {

    p.percent = (p.windowHeight / 2 + p.scrollTop) / (p.contentHeight / 2 + p.contentTop);
}
else if (p.windowHeight / 2 + p.scrollTop > p.contentHeight / 2 + p.contentTop) {

    p.percent =  (p.windowHeight / 2 + p.scrollTop) / (p.contentHeight / 2 + p.documentHeight - p.contentHeight - p.contentTop);
}
else p.percent = 1;

$('.content').animate({
    opacity: 1 - Math.abs(p.percent - 1)
}, 1);

しかし、私はドキュメントの高さを考慮していないので、何かが足りないことがわかります。また、これはif/elseなしで1つの方程式で実行できると思います

これが私が取り組んでいる機能していないフィドルです：http：//jsfiddle.net/nxdTn/

より適切に示すために、以下の例を参照してください。

黄色はドキュメント、透明な灰色はウィンドウ、青色は表示可能領域です。

青は不透明度0になります： ここに画像の説明を入力してください

100％の不透明度で： ここに画像の説明を入力してください

そして0に戻ります： ここに画像の説明を入力してください

4

1 に答える 1

5

猫の皮を剥ぐ方法はたくさんありますが、個人的には、ウィンドウに出入りするscrollTopときの の値の境界を決定し、それらの境界に対する の位置を計算するだけです。中心点やドキュメントの高さは必要ありません。contentscrollTop

CSS に加えなければならなかった小さな変更の 1 つは、 からマージンを削除し、contentパディングとして に追加することでしたbody。マージンは、その値が 0contentであるかのように扱われていました。position.top()

var p = {
    scrollTop: $(window).scrollTop(),
    windowHeight: $(window).height(),
    contentTop: $('.content').position().top,
    contentHeight: $('.content').height()
};

// determine scrollTop's bounds where content enters & exits the window
p.lowerBound = p.contentTop - p.windowHeight;
p.upperBound = p.contentTop + p.contentHeight;

// determine scrollTop's position percentage (x2) in relation to bounds
p.percent = (p.scrollTop - p.lowerBound) / (p.upperBound - p.lowerBound) * 2;

ここで動作するデモを見ることができます: http://jsfiddle.net/GoranMottram/nxdTn/3/

それがあなたが探しているものであることを願っています。

于 2013-02-14T00:07:06.297 に答える