問題タブ [jquery-waypoints]

jQueryウェイポイントを使用してスティッキーナビゲーションバーを作成しようとしています。私はJavascriptについて多くを知らないので、例からつなぎ合わせようとしています。

これが私が使用しているナビゲーションです：

そして、これが私がセットアップしたjQueryです：

よろしくお願いします！

左側のナビゲーションをスクロールするために JQuery Waypoint を使用しています。フッターの前でスクロールを停止するにはどうすればよいですか?

フッターがビューポートに出入りしたときにイベントを発生させるためにjquery-waypointプラグインを使用しようとしています。

jsfiddleで例を作成しましたが、フッター要素でイベントが発生しません。

助言がありますか？

これを見てください：

http://jsfiddle.net/5Zs6F/2/

最初の赤い長方形をスクロールすると青色に変わるのがわかるので、表示された瞬間に青色に変えてほしいと思います。これが、2番目が青に変わることがない理由です。これは、その下にスクロールして通過するのに十分なコンテンツがないためです。

HTML：

CSS：

jQuery：

問題の要素が表示され、スクロールされて過ぎなくなったらすぐに起動させるにはどうすればよいですか？

ウェイポイントjQueryプラグインを使用していますが、スクロールでフェードインを実行すると、プラグインは完全に動作します。それでも、ブロックを次々に（個別に）フェードインさせることはできません。これが私のjQueryコードです：

フェードの間に遅延を設定しようとしましたが、役に立ちませんでした。

プラグインの動作と現在の動作を確認するには、http：//targettedmedia.co.uk/targetedmedia/を参照してください。

よろしくお願いします！

jQueryウェイポイントプラグインとscrollToプラグインを使用して、スティッキーヘッダーなどを実現するページがあります(チュートリアルはこちら: http://webdesign.tutsplus.com/tutorials/javascript-tutorials/create-a-sticky -navigation-header-using-jquery-waypoints/)。

ほとんどすべてがうまく機能していますが、サブメニューで確認できる動作に遭遇しました。ページの下の div に対応するリンクをクリックすると、ページが div に応じてスクロールし、メニューが ' で更新されます。選択されたクラス スタイル。ただし、ページは他の div を超えてスクロールしているため、ページがスクロールするにつれて、メニューはアクティブなメニュー項目ごとにアニメーション化されます。関数を削除してから、ページが対応する div に移動するとすぐに復元できるようにして、アクティブなメニュー リンクをアニメーション化するこのフラッシュを削除したいと考えています。ここで私が話していることを確認できます (サブメニューで、シャトルの運転手や受付係などのリンクをクリックすると)。

http://pinnacleahs.com/?page_id=8

waypoints プラグインに remove() メソッドがあることは知っていますが、それを復元する方法がわかりません。また、同じ目的を達成する別の方法があるかもしれません。

私の関数は次のようになります。

jQueryウェイポイントを使用して、スティッキーヘッダーを持つ単一ページのWebサイトを作成するチュートリアルに従っていました.

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

HTML 構造に少し変更を加えるまでは、すべてうまくいきました。

ウェイポイントに接続されている「about」セクションの下にナビゲーションを配置しました。私のナビゲーションの下には、ウェイポイントに関連付けられていない別のセクションがあります。これは、コンテンツがまだ「about」セクションに属しているためです。

次に、ウェイポイントに関連付けられた他の 2 つのセクションが続きます。

スティッキー機能とスクロール機能は正常に動作しますが、セクションの下にナビゲーションを配置したため、about セクションの強調表示に問題があります。id="about"

ここに jsFiddle があります: http://jsfiddle.net/8GENv/

問題は次のコードにあると確信しています。

ページを下にスクロールしながら、固定divのさまざまな背景色を徐々に循環させたいと思います。jQueryウェイポイントを使用してこれを行うことができると思いますが、どこから始めればよいかわからないため、これを開始する手が必要です。

私が取り組んでいるウェブサイトはここにあります：www.samskirrowdesign.comページの上部にある3pxの高さの固定divの色を変更したいと思います。

私はjQueryが初めてで、どうすればよいかわかりません。

jQuery ウェイポイント プラグインがあり、プログレス バーをアニメーション化する関数もあります。私がする必要があるのは、ウェイポイントに到達したときにプログレス バーをアニメーション化することです。私は両方のコードを持っていますが、それらをまとめることができないようです。

私はこれを置く必要があります：

この中：

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

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

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

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

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

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

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

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