問題タブ [jquery-waypoints]

ウェブサイトに恒星視差を使用しています

デモ: http://webdesigntutsplus.s3.amazonaws.com/tuts/338_parallax/src/index.html

私が使用しているファイルは webtuts のものです: http://webdesign.tutsplus.com/tutorials/complete-websites/create-a-parallax-scrolling-website-using-stellar-js/

私が達成したいのは、中央の「固定」画像にクラスを追加し、アクティブなデータスライドに応じて変更することです。

メニューのボタンをクリックすると画像クラスを変更できましたが、スクロール バーを使用して移動しても画像のクラスは変更されません。

だから私はこのスクリプトを追加しようとしました：

#secondスライドの#img-centerIDであり、ページの中央にある画像のIDですが、機能しませんでした

私もこのコードを試しました：

しかし、それもうまくいきませんでした

私は完全にJavaScriptの初心者で、これを行う方法が見つかりません。

これはHTMLです

これはjsです

だから私は、単一ページのサイトのナビゲーションに jQuery ウェイポイント プラグインを使用しています。

現在、次のようになっています。

各データ スライドは、次のように個別の div に移動します。

私がやりたいことは、元のページの各データ スライド div を対象とする 2 番目のページで同じナビゲーションを使用することです。これを行う方法はありますか？

Stellar を使用して視差効果のある Web サイトに取り組んでいます: http://webdesign.tutsplus.com/tutorials/complete-websites/create-a-parallax-scrolling-website-using-stellar-js/

ページの中央にクラスがある「固定」の div があります。下または上にスクロールすると、「アクティブ」なスライドに応じてクラスが変わります。

私はウェイポイントを使用していますが、ページを下にスクロールするとすべてが正常に機能します。しかし、上にスクロールすると、クラスを変更する代わりに、それらはすべて次々に配置され、順序がずれ、クラスが右のスライドと一致しません。

HTML は次のとおりです (#square は固定 div です)。

そして、ここにjavascriptがあります

ウェブサイトへのリンクは次のとおりです: http://ambuscade.ca/DEV2/

ありがとう

フルウィンドウの div にレイアウトされたページがあります。ナビゲーションはナビゲーション ボタンを押すことで実行されます。ユーザーが div の間のスポットにスクロールできないようにするため、コンテナーに overflow:hidden を設定します。その部分はうまく機能します。

HTML:

そして、ここに私が使用しているJavaScriptがあります：

上にスクロールするときに起動するコード ブロックがありますが、このように見えますが、「下」ではなく「上」で、オフセットは -1 です。

問題は、Waypoints jQuery プラグインを使用して #slide がビューポートの上部にあることを検出し、関連する navbtn でアクティブ状態を設定していることです。そして、ウェイポイントはもう発砲していません。overflow:hidden を削除すると機能しますが、ページを読み込んだときに一度だけ起動します。

overflow:hidden を使用すると、ウェイポイントが起動しなくなる理由はありますか?

jQueryプラグインのWaypointsを使用して、ユーザーが画像をスクロールしたときに一連の画像をアニメーション化します。私が達成したい効果は、ユーザーが上記の画像をスクロールすると、次のcssがオブジェクトに追加されることです-opacity:1とfilter:grayscale(0)、-webkit-filter:grayscale(0)-moz-filter:grayscale(0)

それopacity:1自体で正常に動作し、不透明効果が正常に達成されます。しかし、私は得ることができずfilter:grayscale(0)、働くことができないようです。これが私が使っているものです。些細な解決策だと思いますが、探しているものが見つからないようです。-webkit-filter:grayscale(0)-moz-filter:grayscale(0)

どんな助けでもいただければ幸いです。

イアン

PhoneGap で将来使用するための jQuery Mobile サイトを構築しているため、すべてのコンテンツはリモートの PHP/MySQL からデータを取得する AJAX を介して読み込まれます。

ホームページでは、最初に最初の 10 ニュースだけを読み込みます。次に、「More...」ボタンを使用して、次の 10 件をロードし、すべてのレコードがデータベースから取得されるまで続けます。

http://www.media-italia.eu/app/index2.html

ニュースをクリックして「戻る」ボタンで戻ると、初期状態 (最初の 10 項目が読み込まれます) に戻ります。大丈夫です、ここまでは順調です

ここで、注意が必要な部分があります。ページに「無限スクロール」が必要なため、jQuery Waypointsプラグインを利用しました。結果は次のとおりです。

http://www.media-italia.eu/app/index.html

すべて問題ないように見えますが、ここで奇妙なことが起こります (コンソールを開いて確認してください)
ニュースをクリックしてから戻ってスクロールすると、PHP ページが 2 回呼び出され、項目が重複します。

いくつかのことを試しました (.on() の前に .off() を使用するなど) が、まったくうまくいき
ません。何が問題なのか本当にわかりません。助けてください。

ダウンロード可能なスクリプトも用意しました: http://www.media-italia.eu/app/app.rar

前もって感謝します！！！

私はウェイポイントプラグインを使用していますが、他の人にも開放されています。これまでのところ、下にスクロールして 30% に達すると、div を fadeIn にすることができました。

しかし、再び見えなくなったときに、再びフェードアウトすることはできません。

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

これは強力なスタックオーバーフローにとって難しすぎる質問ですか? ...

親愛なるstackoverflowers、

どういうわけか、ウェイポイントは、発火すべきときではなく、ページが読み込まれたときに発火します。私のウェイポイントの目標は、それがビューポートにあり、上から 90% 離れたときに発火することです。次に、クラス 'hidden' と 'animate fadeInUp' (animate.css を使用) を削除する必要があります。

解決策のアイデアを持っている人はいますか?

ビューポートにスクロールされ、上部から 90% 離れたときにトリガーされる HTML は次のとおりです。

これは私が使用している JavaScript ですが、現在、ページが読み込まれた後に自動的に起動します。

ここに、私が使用している JS-Plugin と animate.css のリンクがあります。

http://imakewebthings.com/jquery-waypoints/

http://daneden.me/animate/

この小さな謎を解ける人に感謝します。

jquery ウェイポイントを使用してスティッキー ナビゲーションを作成しようとしていますが、問題が発生しています。

ページ上

CSS

問題 1: div で動作しないようですか? クラス「sicky1」でdivを適用すると、何もしません。ただし、クラス「stick1」を H1 または A タグに適用すると機能します。これをdivで使用する方法はありませんか?

問題 2: スティッキーを複数の要素に適用し、上部に到達したときにそれらを互いに下に配置する方法はありますか。

基本的に私がやろうとしているのは、アコーディオン効果を作成することです。つまり、私のページに 3 つのセクションがあるとします。

製品 - コンテンツ ABOUT -コンテンツ お問い合わせ -コンテンツ。

ユーザーが一番下までスクロールすると、3 つのセクションがページの一番上にくっついている必要があります。

つまり (これらは、隣り合って互いに下にある必要があります) PRODCUT ABOUT CONTACT

• コンテンツ - -フッター-

これが理にかなっていることを願っています。Jquery は私の得意分野ではありません。