私が以前に使用した方法は、この新しいアプリケーションでは完全に機能していないため、jqueryの専門家の助けを本当にいただければ幸いです。
私が達成しようとしていること
Webサイトラッパーの右側と左側に2つのタブがあり、ページを下にスクロールしたときにのみ表示されます。そして、タブが画面の中央に到達すると、タブは固定位置になり、所定の位置にロックされているように見えます。以下の一般的な効果/アイデアを参照してください...
http://jsfiddle.net/motocomdigital/SGCHt/2/
問題
上記のフィドルがすでに機能しているのかどうか、なぜ私が質問しているのか疑問に思われるかもしれません。
上記のフィドルは、ウィンドウの上からスクロールする位置で機能するため、機能します。
しかし、私のWebサイトでは、これらのタブはコンテンツ領域にのみ存在し、ヘッダー、バナー、スライドショー領域の上に配置することはできません。
上記のjsFiddleの例では、ヘッダー、バナー、またはスライドショーがないことに気付くでしょう。したがって、タブコンテナの列は一番上まで実行されるため、これは現在のスクリプトでは問題になりません。
レイアウトのさまざまな組み合わせがある以下のフィドルを参照してください。そうすれば、私の問題がわかります。
デザインの観点を確認できるように、タブコンテナの列のオレンジ色の背景を削除したことに注意してください。
- ヘッダー、ナビゲーション、スライドショー、広告-http ://jsfiddle.net/motocomdigital/SGCHt/3/
- ヘッダー、ナビゲーション、広告-http ://jsfiddle.net/motocomdigital/SGCHt/4/
- ヘッダー、ナビゲーション-http ://jsfiddle.net/motocomdigital/SGCHt/5/
次に、タブコンテナの列にオレンジ色の背景がある下のフィドルを参照してください。これにより、タブがコンテンツ領域divの横にのみ表示される構造を確認できます。
http://jsfiddle.net/motocomdigital/SGCHt/6/
解決
スクリプトは、タップが画面の上部から50％に達したときに、タブに固定位置を追加する必要があります。しかし、タブコンテナはウィンドウの一番上まで実行されないため、これを計算する方法がわかりません。これを達成するための別のスクリプト方法はありますか？
どんな助けでも大歓迎です。ありがとうございました！