0

次の問題についてサポートが必要です。

レスポンシブサイトを作成しています。その構造は非常に基本的です：ヘッダー、ナビゲーションバー、ボディ、フッター。

ヘッダーにはいくつかの要素があり、これらの要素はすべて寸法にパーセンテージを使用しているため、ヘッダーの高さはその中の要素の高さによって決まります。

ナビゲーションバーには「スティッキー」スクリプトを使用する予定なので、ページをスクロールすると、ナビゲーションバーはページの上部に「固定」され、最後まで戻ると「固定解除」されて表示されます。ヘッダーの下。

ここまでは順調ですね。

スティッキースクリプトは、ナビゲーションバーをヘッダーの下に正しく貼り付けるために、ヘッダーの高さに依存します。そのため、ウィンドウのサイズを変更してレイアウトの応答性をテストすると、スティッキーなナビゲーションバーがおかしくなります。

必要なのは、ヘッダーの高さを検出し、 <header>ieにスタイルを作成してDOMを変更する方法です。（<header style="height:198.3px">）、ブラウザウィンドウのサイズを変更するときに動的な高さを割り当てます。

これはプロパティを使用して達成できることだと思いますheight();が、私はjQueryの第一人者ではないため、それが機能するかどうかはわかりません。

どんな助けでも大歓迎です。

PS。ところで、Stackoverflow.comは、投稿を作成/編集するときに、右側の列のボックスでこの「スティッキー」機能を使用します。

4

3 に答える 3

1 
$('#elementId').height()//Return height of element
于 2012-09-29T05:09:19.077 に答える
1

ブラウザのサイズ変更イベントにイベントリスナーを追加できます。

$(window).resize(function () {
    // resize header here
    $("#header").css({
        height : $("#header").height()
    });
});

これにより、ブラウザのサイズを変更するときに、ヘッダーの流動的な高さを使用してヘッダーに固定の高さが設定されます。

これがまさにあなたが求めているものであるかどうかはわかりませんが、これは、サイズ変更イベントにバインドする方法と、DOMノードの高さを取得する方法を示しています。

于 2012-09-29T05:09:24.393 に答える
1

このようなものから始める必要があります:

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

$(window).scroll(function() {
    if ($(this).scrollTop() > $header.offset().top + $header.height()) {
        $sticky.css({
            top: 0,
            position: 'fixed'
        });
    } else {
        $sticky.css({
            top: 'auto',
            position: 'absolute'
        });
    }
}).trigger('scroll');​

デモ: http://jsfiddle.net/Blender/S66gR/2/

JavaScript で CSS を複製する代わりに、既存のものをそのまま使用します。position: fixed要素を画面に「貼り付ける」ようにします。

于 2012-09-29T05:26:32.760 に答える