7

これは私の jQuery/javascript の知識には少しトリッキーすぎるので、まだ何も試していないと言って申し訳ありません。正しい方向に向けるためのヒントが必要です！

問題は、ページに固定要素があり、下にスクロールすると、この要素が別のラッパーに入るということです。そのラッパーでは、固定要素に「スナップ」するために小さな子要素が必要であり、要素内にあります。

説明が難しいので、ここに静的モックアップを作成しました。

http://jsfiddle.net/ycmYc/

「固定カートボタン」が価格に達したら、価格「product-div」内にある限り、カートボタンを取り付けてスクロールする必要があります。出て次に入るとき、価格は製品の下部にとどまり、ユーザーが上にスクロールして到達したときに再びカートボタンにスナップする必要があります.

さて、もう一度、何も試していないことをお詫びしますが、私は迷っています. 助けを借りずにこれを行う必要がある場合は、waypoints.js を使用すると思いますが、最適とはほど遠いと感じています。

どんな助けでも大歓迎です！

固定要素は常に同じ位置になるため、その位置を追跡する代わりに、ブラウザーの上部からのオフセットを使用できると思います。いつも何か;）

アップデート：

自分で作業していて、下向きには機能しましたが、上向きには機能しませんでした:

私が何を意味するのかを明確にする必要があります:

http://retype.se/temp/scrolltest/test.html

価格でスクロールすると、ボタンが下に結合し、コンテナを離れるとスナップが緩みます。私の問題は、上にスクロールするときにスナップして元の位置に戻すことです:)

4

3 に答える 3

1

Do you want it like this?

http://jsfiddle.net/ycmYc/39/

only result: http://fiddle.jshell.net/ycmYc/39/show/light/

enter image description here

updated:

How about this?

http://jsfiddle.net/ycmYc/93/

only result: http://fiddle.jshell.net/ycmYc/93/show/light/

于 2012-08-24T10:06:34.943 に答える
0

これはただの愚痴ですが、うまくいくかもしれません (申し訳ありませんが、フィドルの時間がありません)。しかし、私は、視覚的にごまかそうとするかもしれないという考えを思いつきました。

つまり、すべての価格 div の絶対位置を計算し、それらを非表示にし、スクロールによってカート div がその位置に到達したときに、ピクセル スクロールの x 量の価格 div を表示します (または、背景を作成することによる z インデックスを介して、どちらがあなたに合っているかを確認してください）。

これが少し役立つことを願っています。今日はスクリプトを作成する時間があるかもしれません。

于 2012-08-24T09:33:36.410 に答える
0

それはちょっと制約に依存します。ウィンドウのスクロール位置は、 window.pageYOffsetまたはで検出できますdocument.documentElement.scrollTop。

div がすべて同じサイズの場合、ボタンが上にある div とそのposition: fixed隣の価格を簡単に計算できます。

于 2012-08-24T09:33:44.040 に答える