2

Javascript のアニメーション スクロールの問題に頭を悩ませています。

Greensock JS トゥイーン ライブラリの上に構築された SuperScrollorama Jquery プラグインを使用しています。

私が求めている基本的な効果は、セクションを「固定」してから、垂直スクロールを使用して一部のコンテンツを展開し、コンテンツが完全に展開されたらセクションを「固定解除」して、ユーザーがスクロールできるようにすることです-つまりhttp:// blueribbondesign.com.au/example/

しかし、この同じ効果を複数のセクションに次々と適用しようとすると、すべてが壊れてしまいます。固定された要素の下の「固定されていない」コンテンツが画面から押し出され、アニメーションを実行するときに要素の高さを誤って計算しているようです。逆に（つまり、ページを上にスクロールします）。- すなわちhttp://blueribbondesign.com.au/example2/

「position:fixed」と「pin-spacer」の div を際限なくいじり、Superscrollorama プラグインをさまざまな要素に接続しようとしましたが、それを機能させる方法がまだわかりません。

Web の優れたクラウドソーシングの頭脳からの助けをいただければ幸いです。

乾杯、

TN。

4

1 に答える 1

4

私は自分でこの問題に取り組んできました。pin() 関数で定義した高さで固定されているセクションの上に空白の div スペーサーが配置されます。次に、固定された要素に position:fixed が割り当てられます。これらの両方により、要素が固定されたまま、スクロールバーがページを下に移動し続けることができます。次に、そのセクションの下にあったものはすべて、そのスペーサー div の高さのために押し下げられます。

固定された要素が水平方向の中央に配置されている場合は、最初に left:50%, margin-left:-{width/2} px を指定して、左端に押し込まれないように修正します。

次に、固定/固定解除イベント ("anim" に追加のパラメーターとしてプラグインによって提供される) を検出し、その下のセクションを変更して、固定/相対位置も切り替える必要があります。その基礎となるセクションを固定位置に変更するときは、固定された要素の高さが何であれ、その "top" プロパティを必ず設定してください。固定された要素の固定が解除されたら、相対位置に戻します。それは意味がありますか？

さまざまな手法でさまざまな修正が必要になるようですが、それらのことは私が注意を払うものです...固定位置、そして調整のために固定/固定解除イベントを使用します。

于 2012-06-30T23:48:03.197 に答える