0

ドキュメントの幅が 769px を超える場合にのみ、ナビゲーションが固定されたレスポンシブ Web サイトを作成しようとしています。

サイズ変更時にウィンドウがサイズよりも大きいか小さいかをアラートを使用してテストすると、次のコードが正常に機能します。

ただし、スティッキー ヘッダー スクリプトを else ステートメントに追加すると機能せず、その理由がわかりません。

誰でも私を正しい方向に向けることができますか？

ありがとう

これは、ウィンドウ サイズのステートメントです。

 $(window).resize(function() {
 if ($(window).width() < 769) {
 alert('Less than 769');
 }
 else {
 alert('More than 769');
 }
 });​

これは、ウィンドウ幅が 769 より大きい場合に使用しようとしているコードです。

var aboveHeight = $('header').outerHeight();

$(window).scroll(function() {

    if ($(window).scrollTop() > aboveHeight) {

        $('nav').addClass('fixed').css('top', '0').next().css('padding-top', '99px');
    } else {

        $('nav').removeClass('fixed').next().css('padding-top', '0');
    }
});

ありがとう

4

1 に答える 1

0

スクロールイベントに状態antテストを保存するだけです

var isRightSize = false;

 $(window).resize(function() {
     if ($(window).width() < 769) {
         isRightSize = false;
     }
     else {
         isRightSize = true;
     }
 });​

var aboveHeight = $('header').outerHeight();

$(window).scroll(function() {

    if(!isRightSize)
        return false;

    if ($(window).scrollTop() > aboveHeight) {

        $('nav').addClass('fixed').css('top', '0').next().css('padding-top', '99px');
    } else {

        $('nav').removeClass('fixed').next().css('padding-top', '0');
    }
});
于 2012-10-26T11:34:58.827 に答える