2

中央上部に幅約1000px、高さ約20〜25pxのスティッキーナビゲーションを備えた1ページのサイトを作成しています。現在、スムーズスクロール機能も含まれていますが、ページがアクティブなページにスクロールするたびにタイトルが表示されますスティッキー ナビゲーションの下に隠れています。スティッキー ナビゲーションの下部のオフセットを取得するにはどうすればよいですか? ありがとう。

これはところでjsコードです：

$('a').click(function(e) {
        var target = $(this).attr('href');
        e.preventDefault();

        $('html,body').animate({
            scrollTop: $(target).offset().top
        }, 800, 'easeInOutCirc');
    });
4

3 に答える 3

5

現在のコードをそのまま維持し、そのオフセットを Web サイトの上部に追加する最も簡単な方法は、.top の後に必要なオフセット値を次のように追加することです。

$('a').click(function(e) {
    var target = $(this).attr('href');
    e.preventDefault();

    $('html,body').animate({
        scrollTop: $(target).offset().top - 20
    }, 800, 'easeInOutCirc');
});

この答えが最後の答えほど複雑ではないことを願っています。:)

于 2012-08-17T15:20:42.713 に答える
2

jQuery の.position()メソッドは、ページに対する要素の上オフセットと左オフセットを提供します。.outerHeight()そのため、スティッキー ナビゲーションの をその値に追加するだけで済み.position().topます。

例を次に示します: http://jsfiddle.net/NUfaZ/1/

ページを下にスクロールすると、その位置が更新されていることがわかります。

于 2011-10-08T12:54:47.120 に答える