2012-06-12 23 views
5

これまで使用してきた方法として、jqueryのエキスパートヘルプに感謝します。この新しいアプリケーションではあまり効果がありません。divがスクロール位置ではなく画面位置に到達するとJquery fix div位置

私は

を達成しようとしているWHAT

私は、ページを下にスクロールするようにのみ見えるようになり、右と私のウェブサイトラッパーの左側にある2つのタブが、持っています。タブが画面の中央に達すると、タブは固定位置になり、その位置に固定されます。 ...以下の一般的な効果/アイデアを参照してください

http://jsfiddle.net/motocomdigital/SGCHt/2/


PROBLEM

上記のフィドルがすでに動作しているか、私は疑問を聞いてるのよ、なぜあなたはおそらく疑問に思っ。

上記のフィドルは、ウィンドウの上からスクロール位置で動作するため動作します。

私のウェブサイトでは、これらのタブはコンテンツエリアにのみ存在し、上記のヘッダー、バナー、スライドショーエリアには掲載できません。

上記のjsFiddleの例では、ヘッダー、バナー、またはスライドショーがないことがわかります。これは、現在のスクリプトでは問題にはなりません。なぜなら、タブコンテナの列が一番上まで走っているからです。

レイアウトの組み合わせが異なる下のフィドルをご覧ください。あなたの問題が表示されます。

タブのコンテナ列のオレンジ色の背景を削除して、デザインの視点を確認してください。

  1. ヘッダー、ナビゲーション、スライドショー、広告 - http://jsfiddle.net/motocomdigital/SGCHt/3/
  2. ヘッダー、ナビゲーション、広告 - http://jsfiddle.net/motocomdigital/SGCHt/4/
  3. ヘッダー、ナビゲーション - http://jsfiddle.net/motocomdigital/SGCHt/5/

今タブ上のオレンジ色の背景を持っているフィドルその下に表示さコンテナ列を使用すると、コンテンツ領域divの隣にタブが表示される方法の構造を見ることができます。

http://jsfiddle.net/motocomdigital/SGCHt/6/


SOLUTION

いくつかはどのようにタップが画面の上から50%に達したとき、タブに固定された位置を追加する必要がスクリプト。しかし、タブコンテナがウィンドウの一番上まで動かないので、これをどのように計算するのか分かりません。これを達成する別のスクリプト方法がありますか?

ご協力いただければ幸いです。ありがとうございました!

+0

ピン留め機能とAAを、[** jQueryの視差プラグイン**](http://smashinghub.com/7-jquery-parallax-and-scrolling-effect-plugins.htm)を用いて検討すること問題のタブを扱うためにブラウザを横切っています。 – arttronics

答えて

6

画面の高さの50%になるスクロールを見るのではなく、上部からコンテンツ領域の位置を追加できます。

http://jsfiddle.net/SGCHt/7/

+0

ありがとう!非常に簡単です。いずれかの前に.offsetを使用していない – Joshc