2

ユーザーが私の Web サイトを下にスクロールしたときに、最上部のヘッダーが表示されていないことを検出したいと考えています。これはjqueryで可能ですか？

4

2 に答える 2

2

@RoryMcCrossanで言及されているように、自分で計算できます。

もう少し柔軟性が必要な場合は、次の jQuery プラグインを試してください。

http://www.appelsiini.net/projects/viewport

要素が表示されているビューポート内にあるかどうかに基づいて DOM をクエリできます。

例えば：

$("div:in-viewport")

div現在表示されているのみを返します。

要素がどこにあるかに基づいて、表示されていない要素を照会することもできます。主に:

$(":below-the-fold")
$(":above-the-top")
$(":left-of-screen")
$(":right-of-screen")

詳細については、上記のリンクとダウンロードを確認してください。

このライブラリを使用して、現在表示されていない要素をクエリする場合
は、それらがどこにあるかに関係なく、次を使用します。

$("div").not(":in-viewport")

したがって、ヘッダーの ID が であると仮定すると、次のheaderように使用できます。

var $header = $('#header');

$(window).scroll(function()
{
    var isVisible = $header.is(':in-viewport');
    // Now show, hide, or do whatever you want...
});
于 2012-05-11T20:41:22.837 に答える
1

offset()ウィンドウスクロールの位置に対して使用して、要素の位置を確認する必要があります。このようなもの：

$(window).scroll(function() {
    var $header = $("#header");
    var headerBottomPos = $header.offset().top + $header.height();
    if (headerBottomPos < this.scrollTop()) {
        // header is not being displayed
    }
});
于 2012-05-11T20:42:05.813 に答える