問題タブ [jquery-waypoints]

jQuery Waypoints プラグインを 1 ページの Web サイトの固定メニューと組み合わせて使用​​しました。メニューは上下の矢印で構成されています。ウェイポイントが渡されると、jQuery を使用して上下の矢印のリンクを次または前のページに変更します。ボタンが押されると、jQuery スクロールを使用してそのページにスクロールします。これはかなりうまく機能し、jQuery ウェイポイントがこのように使用されているのを見たことがあるかどうかはわかりません。素晴らしいプラグインをありがとう！

ただし、サイトを完全にレスポンシブにしようとしていますが、ウェイポイント情報の更新であると思われる問題が 1 つあります。ウィンドウのサイズを変更しても、ページの高さ (ウェイポイントの定義時に計算されます) は変化しません。これにより、不適切なスクロール距離が発生します。

私は学生で、私のコードは少し乱雑で、おそらく少し非効率的ですが、私のサイトのベータ版はここで見ることができます: http://beta.kyleboulay.com

繰り返しますが、明確にするために、ページが最初にロードされた後にウィンドウのサイズを変更すると問題が発生し、距離が適切に再計算されません。

編集：ウェイポイントのオフセット値を50％に変更することで、問題をある程度修正したようです。ただし、ウィンドウのサイズ変更時にウェイポイントの再定義をトリガーする方法を知っておくとなお良いでしょう。

どんな助けでも大歓迎です！ありがとう。

以下は私のコードの例です。

ウェイポイントを次のように定義します。

jQuery Waypoints ライブラリを使用して、メニュー バー コンテナーの位置を静的から固定に変更します。ブラウザ ウィンドウをメニュー バーまでスクロールすると、バーはウィンドウの上部に固定されます。

ウェイポイントまでゆっくりとスクロールすると、状態の変化がスムーズに発生するように見えますが、通常の速度でスクロールすると、メニュー バーのコンテンツにわずかなジャンプ/バウンスが発生します。

マークアップ:

関連する CSS:

jQueryコードは次のとおりです。

問題を説明するためにJSFiddleをセットアップしましたが、この影響を防ぐことができるのでしょうか?

私が何か間違ったことをしているかどうかはわかりませんが、いくつかのセクションがあり、いくつかはサブセクションがあります。

そのため、2 つのウェイポイント呼び出しを設定して、section-topvs .section-sub

ただし、section-subウェイポイントをスクロールすると、section-topまだ.section-topsection-sub

この jsbinを見ると、ウェイポイントの最初のセットで が呼び出されていることがわかりますがtrigger-count、ウェイポイントのサブセットをスクロールすると常に上昇しています。

これが機能するはずの方法ですか、何か間違っていますか? (ウェイポイントを 2 回登録する必要はないのでしょうか?)

警告: jQuery の初心者...

私が取り組んでいるこのパララックス Web サイトでスクロールがどこにあるかに応じて、ヘッダーをフェードインおよびフェードアウトさせようとしています。私が抱えている問題は、イーズイン/イーズアウトする方法がわからないことです。

そして、 Stellar jQuery プラグインとウェイポイントを組み合わせて、この新しいサイトを作成しています。

ロード時に、 opacity: 0 を置く「hidden」を追加しました。

ここにナビゲーションのスニペットがあります:

.js のスニペットを次に示します。

助けてくれてありがとう！

以下を見ると、オフセット -185 にいくつかのクラスを追加しています。下にスクロールすると、2 つのクラスがアニメーション化/フェードインされます。オフセットを超えて上にスクロールしたときにバーをフェードアウトさせたいのですが、これを達成するのに苦労しています。jQuery ウェイポイント スクリプトを使用していますhttp://imakewebthings.com/jquery-waypoints/

stellar.js とウェイポイントを使用して、次の視差アニメーションを作成しました。背景の代わりに画像をアニメーション化し、スライドを切り替えるときにテキストをフェードインおよびフェードアウトしています。これはすべて、下にスクロールすると機能しますが、スライド 4 から上にスクロールすると機能しません。

スライドが移動する前にウェイポイントが発火するかのように、スライド 4 から 3 に移動するときでも、dataslide は 4 であると見なされます。ただし、activeSlideNumber (つまり、dataslide に移動する前のスライド) が正しい番号であっても、クラスの activestip はスライド 4 から削除されず、スライド 3 のテキストはフェードインしません。

これはHTMLです

そしてJS

私はこのjqueryスティッキーナビゲーションを使用しています

http://webdesign.tutsplus.com/tutorials/javascript-tutorials/create-a-sticky-navigation-header-using-jquery-waypoints/

しかし、それは主にiPadのモバイルでは機能しません。1回目以降、ナビゲーションはナビゲーションの場所に戻らず、スティッキークラスは消えません。誰か助けてもらえますか？

以下のスクリプトをjQuery Waypoints プラグインと共に使用して、要素がブラウザー ウィンドウの中央に 50% (または 75%) 配置されたときに要素を 100% の不透明度にフェードします。要素が最初にフェードインしないように見えることを除いて、コードはかなりうまく機能しているようです。下にスクロールしてから元に戻すと、要素がトリガーされているようです。

Waypoints.jsを使用していますが、特定のウェイポイントに到達したときにナビゲーションアイテムのスタイルを変更することについて質問があります。このコードを使用して、ウェイポイントpost-26に到達したときに、メニュー項目menu-item-29に黒のクラスを追加しています。動作しますが、ウェイポイントからスクロールして離れると、黒のクラスは削除されません（そのままになります）。ウェイポイントがスクロールアウトされたときに黒いクラスを削除するにはどうすればよいですか？ありがとう。

jQuery Waypointsプラグインを使用して、WordPress のページの上部に要素を貼り付けたいと考えています。

しかし、コンソールには次のように表示されます。

エラー: スティッキー メソッドは jQuery ウェイポイントに存在しません。

何か不足していますか？