0

基本的に、次のような div のリストがあります。

<div id="1">最初の分割</div>

<div id="2">2番目のdiv</div>

そして、次のように、最も目に見える div が別の定数 div に表示されるものに影響を与えるようにします。

<div id="link">最初の div のリンク</div>(最初の div がページの大部分を占める場合)

その後

<div id="link">2 番目の div のリンク</div>(2 番目の div がスクロールされた場合)

どの div が表示されているか (画面上のピクセル空間の最大の割合を占めるものによって計算されます) を Javascript に把握させ、それに基づいて「リンク」div のイベントをトリガーするにはどうすればよいですか?

4

1 に答える 1

0

以前の回答を編集しています。

各 div がドキュメントの上部からどれだけ離れているかを調べる必要があります (ウィンドウがどれだけ下にスクロールされても、固定数です)。

divTop = $('#1').offset().top

次に、ウィンドウがスクロールされた距離を調べます。

scrollTop = $(document).scrollTop()

ウィンドウの高さ (ドキュメントの表示部分の高さ) も必要です。

windowHeight = $(window).height()

そして、各 div の高さが必要です。

divHeight = $('#1').height().

次に、window の上部を基準にして各 div の開始位置を計算します。これは負の数になる可能性があります (ウィンドウが div の上部を超えて下にスクロールされた場合)。この場合、Math.max を使用してゼロにします。

divTopInWindow = Math.max(0, divTop - scrollTop)

同様に、ウィンドウの上部を基準にして div の下部を計算します。div がウィンドウの下部を超える場合は、それをウィンドウの高さにします。

divBottomInWindow = Math.min(windowHeight, divTop + divHeight - scrollTop)

最後に、各 div の表示パーセントを次のように計算します (実際には、パーセントではなく分数です)。

percentVisible = (divBottomInWindow - divTopInWindow) / windowHeight

私は試していないので、間違っているかもしれませんが、間違いなく正しいアプローチです。

-------------------------- 参考までに以下の古い回答 ------------------ 「イベントをトリガーする」という表現を適切に使用しているとは思いません。何らかの条件 (つまり、div 1 が div 2 よりも高いかどうか) に基づいて div のコンテンツを設定したいだけのように聞こえます。

ページに jQuery または Zepto がロードされていると仮定します。

if( $('#1').height() > $('#2').height() ) {
    $('#link').html('First div link');
}
else {
    $('#link').html('Second div link');
}
于 2012-05-31T14:40:29.750 に答える