0

これらの if ステートメントは、常に私をめまいさせます。ヘッダーのあるページがあり、マークアップでその上に非表示のヘッダーがある場合。

<div id="headerfloat" style="display:none;">
    <p>Floated header</p>
</div>
<div id="header">
    <p>Header</p>
</div>

これは、ページが 225 ピクセル以上下にスクロールされるたびに が表示され、#headerfloattopScroll が 225 ピクセル未満になると消えるという考え方です。そして、私はこれをjavascriptとjQueryでうまく動かすことができましたが、iPhoneでテストすると非常に遅くなります。そして、コードが各スクロールイベントで実行されるためだと確信しています。が表示されていても#headerfloat、コードは実行されます。その時点でそうする必要はありませんが。

そのため、コードが必要なときに一度だけ実行されるようにする必要があります。.open私が最初に考えたのは、やのようなクラスを追加および削除することでし.closedた#headerfloat。そして、スクロール イベント中に if ステートメントを実行します。しかし、それはそれを行う最も効率的な方法ですか？

私のこれまでのところ、醜いスニペット：

jQuery(window).scroll(function () {
    var headerfloat = $("#header_float");
    var top = jQuery(window).scrollTop();
    if (top > 225) // height of float header
    {
        if (!$(headerfloat).hasClass("closed")) {
            $(headerfloat).addClass("boxshadow", "", 100, "easeInOutQuad").slideDown().addClass("open").removeClass("closed");
        }
    } else {
        $(headerfloat).removeClass("boxshadow", "", 100, "easeInOutQuad").removeClass("closed").slideUp();
    }
});

編集: laconbass の素晴らしい応答の後、これは私が最終的に得たコードです:

var mainHeader = $('#header')
          , top_limit = mainHeader.outerHeight()
          , $window = $(window)
        ;

        var header_float = $('#header_float')

        bindEvent();

        function bindEvent() {
            $window.scroll( scrollEvent );
        }

        function scrollEvent() {
            var top = $window.scrollTop();
            // avoid any logic if nothing must be done
            if ( top < top_limit && !header_float.is(':visible')
                || top > top_limit && header_float.is(':visible')
            ) return;
            // unbind the scroll event to avoid its execution
            // until slide animation is complete
            $window.unbind( 'scroll' );
            // show/hide the header
            if ( top > top_limit ) {
                header_float.slideDown( 400, bindEvent );
            } else {
                header_float.slideUp( 400, bindEvent );
            }
        };
4

2 に答える 2

2

あなたが始めたスニペットは少し醜いようです。

あなたの喜びと参照のために、jsfiddleで1つ作成しました

私は次のことを想定しました：

  • fixedページが下にスクロールするときにヘッダーを配置する必要があります（別名）fixed header。
  • fixed headedクラスfixed.
  • fixed headerページがヘッダーの高さよりも下にスクロールすると表示されます。
  • fixed headerページがメインページのヘッダーを表示するのに十分なほど上にスクロールすると、非表示になります。

パフォーマンスのヒント:

  • jQuery オブジェクトをキャッシュして、イベント ハンドラーが実行されるたびに新しいクエリを作成しないようにします。
  • アニメーションの表示/非表示の前にイベント ハンドラーをバインド解除し、後で再バインドします。
  • イベント ハンドラーでは、不必要なロジックを避けるために、できるだけ早く戻ります。JavaScript の実行中は、ブラウザのレンダリング プロセスがブロックされることに注意してください。
var mainHeader = $('header')
  , header = mainHeader.clone().addClass('fixed').appendTo('body')
  , top_limit = header.outerHeight()
;

bindEvents();

function bindEvents() {
    $(window).scroll( scrollEvent );
}

function scrollEvent() {
    var top = $(window).scrollTop();
    // avoid any logic if nothing must be done
    if ( top < top_limit && !header.is(':visible')
        || top > top_limit && header.is(':visible')
    ) return;
    // unbind the scroll event to avoid its execution
    // until slide animation is complete
    $(window).unbind( 'scroll' );
    // show/hide the header
    if ( top > top_limit ) {
        header.slideDown( 400, bindEvents );
    } else {
        header.slideUp( 400, bindEvents );
    }
};

<header>
    <h1>Awesome header</h1>
</header>
<div>
    <!-- the page content -->
</div>

/* the real code needed */
header.fixed {
    display: none;
    position: fixed;
    top: 0;
}
于 2013-06-19T10:34:14.417 に答える
0

双方向:

1、スクロールで、必要に応じて、スクロールイベントを削除します。

2,var 変数。デフォルトは false です。スクロール時に、変数が false の場合は、必要に応じて、変数を true に設定します。変数がすでに true の場合は、何もしない (または必要に応じて他のことを行う)

于 2013-06-19T09:23:54.380 に答える