1

スクロールすると関数を呼び出すコードを検出します。

この関数では、スクロールしながらコンテンツをフェードインできるようにしたいと思います。したがって、ページの下部に到達すると、関数が呼び出され、静的htmlのスニペットがフェードインされます（たとえば、一度に10行のコンテンツ）。

うまくいけば、誰かが私が立ち往生しているのでこれを終わらせるのを手伝ってくれるでしょう：-

http://jsfiddle.net/sTSxS/

ありがとう

4

2 に答える 2

2

さて、最初に、フェードインする行数を決定するために、ある種の比率が必要になるでしょう。なぜこの比率が必要なのですか？ユーザーが1インチ下にスクロールするだけの場合は、6インチのコンテンツをフェードインしたくありません。

ここでメモを取り、最終的な実装では、比率は使用したいものではないことを指摘しておきます。解決策について考えるのは簡単な方法ですが、実際には、ページの場所とコンテンツサイズに応じてコンテンツの量をフェードインしたいと思うでしょう。さらに、行全体が訪問者に表示されない場合でも、コンテンツをフェードインする必要があります（必要に応じて、後でこれを支援できます）。

ここでは、各行の高さが20ピクセルで、行の間にスペースがなく、20ピクセルのスクロールごとに1行がフェードインする比率であるとします（この比率では、コンテンツがフェードインするまで、コンテンツはフェードインしません。完全にスクロールして表示します）。

次のステップは、スクロールしている量を追跡する方法を設計することです。簡単にするために、変数を使用して現在のウィンドウ位置を保持しましょう（この変数は20pxスクロールするたびに更新されます）：

var current = $(window).scrollTop(); //sets the initial value

次に、フェードインした行数を追跡する方法を作成します。これを行う方法はたくさんありますが（これから使用する方法よりも優れた方法もあります）、目的のために変数を使用します。シンプルさの。

var rowsShown = 0;

次に、スクロールイベントハンドラーを記述してコードを呼び出し、必要かどうかを判断し、必要な場合は行をフェードインする必要があります。

$(window).scroll(function () {
    ...code to determine if you should and actually fade in rows...
});

次に、条件を記述して、行をフェードインする必要があるかどうかを判断する必要があります。まず、別の変数を書き込んで新しいウィンドウの位置を決定し、に格納されている前の位置と比較しcurrentます。私たちの比率は1行あたり20ピクセルだったので、別の行でフェードインするには、ウィンドウが少なくとも20ピクセルスクロールしている必要があることに注意してください。

var newPosition = $(window).scrollTop();

if ((newPosition - current) >= 20) {
    ...fade in rows...
    current += 20; //update current
}

この単純な「チュートリアル」では、現在の位置を新しい現在の位置（）に更新するのではなく、以前よりも20多く設定する必要があることを指摘しておきますnewPosition。なぜ聞くの？マウスは常に一度に1ピクセルずつスクロールするとは限らないため（実際、ほとんどスクロールしません）、1行あたり20ピクセルをフェードインしてシンプルに保つため、現在の20の倍数を維持することでその比率を維持したいと考えています。ただし、これの最終バージョンを作成するときは、変更することをお勧めしますcurrent = newPosition;。

次に、フェードインコードを記述する必要があります。

$(rowsToFadeIn).eq(rowsShown).fadeIn(speed, function () {
    rowsShown += 1; //increment the accumulator
    ...do any other call back stuff here...
});

最後に、コンテンツを上にスクロールしてフェードアウトするための同様の方法を作成する必要があります（そうでない場合は、上にスクロールしてもう一度下にスクロールし始めると、コンテンツがフェードアウトすることはありません。コンテンツはフェードアウトします）。

これは完全な実装ではないことに注意してください-これはあなたが始めるためだけのものです。そして、あなたがテストして遊ぶための何かを手に入れてください。動作させたら.promise().done()、前のエフェクトがいつ完了したかを判断するために、使用するスクリプトのエフェクト部分を変更します。を使用することに不安がある場合.promise().done()は、次のようにします。

  1. var fading = 0現在フェードしている要素の数を保持する変数を作成します。

  2. 要素のフェードを開始するたびに、次のことを行います。

    1. に1つ追加fading

    2. 次のような呼び出しでエフェクトを呼び出します。

      $(rowsToFade).eq(rowsShown).delay((fading - 1) * speed).fadeIn(.....

      • (fading - 1) * speed現在実行中のすべてのフェード（実行しようとしているフェードを除く）の待機の遅延
    3. メソッドのコールバックで、不要な遅延を防ぐために、.fadeIn()フェード（）から1を引きます。fading -= 1;


私があなたならタイマーを避けようとします。それらにはかなりのオーバーヘッドがあり、あなたが望むことを正確に行うことは決してありません。さらに、フェードなどを使用すると、特に低速のブラウザやChromeなどの高速のブラウザで、途切れ途切れの効果が生じる傾向があります。

ご不明な点がございましたら、お気軽にお問い合わせください。喜んでお手伝いさせていただきます。幸運を！:)

編集：私はほとんど忘れていました、あなたはあなたの要素が通常の流れの一部であった場合の高さになるようにボディまたはラッパー要素の高さを設定する必要がありますdisplay: none（これはとに必要です）ページをフローして、そこにない場合の高さまで短くします。これにより、スクロールバーすらなくなる可能性があります。fadeInfadeOut

.delay()編集2：間違いなく不要な遅延が発生するため、を使用して提案された更新された実装を改善できることにも注意してください（使用する場合はそうする必要があります） 。プランAが気に入らない場合は基本的にプランBです（.promise().done()）;）

ただし、jQueryを初めて使用する場合は、Aを使用するよりもBを改善することで多くのことを学ぶことができます。

于 2012-08-31T18:30:09.953 に答える
0 
if ( $(window).scrollTop() + $(window).height() > ( $(document).height() / 1.2 ) && document.documentElement.scrollHeight != document.documentElement.clientHeight ) {
                doit();

}
于 2012-08-31T15:35:40.693 に答える