1

私の目的は、ヘッダーがスクロールされた後、ビューポートの上部にメニュー バーを固定することです。

この jQuery を使用してこれを実現し、次のコードを使用して、メニュー バーが一番上に達したときに CSS を変更しました。

jQuery(document).ready(function($){
    // Check the initial Poistion of the Sticky Header
    var stickyHeaderTop = $('#stickyMenu').offset().top;

    $(window).scroll(function(){
            if( $(window).scrollTop() > stickyHeaderTop ) {
                    $('#stickyMenu').css({position: 'fixed', top: '0px'});
                    $('#stickyAlias').css('display', 'block');
                } else {
                    $('#stickyMenu').css({position: 'static', top: '0px'});
                    $('#stickyAlias').css('display', 'none');
            }
    });
});

これが私の作業例を含む私の開発ページです: http://dev.harryg.me/serge/home/

Firefox では夢のように動作しますが、Chrome には問題があります。css の変更は、本来よりもはるかに早く開始されたようです。数ピクセル下にスクロールしただけで、メニュー バーが固定され、上部に固定されます。ヘッダー画像のせいだと思いますが、理由がわかりません...

編集：すべての提案に感謝します。私は自分の開発セットアップから離れているので、あなたのすべての提案をレビューするのを待つ必要があります. Explosion Pills と Malk が言っていたように、問題はstickyHeaderTop、ヘッダー イメージが読み込まれる前に が計算されるためです。これが、画像がキャッシュされると機能するのに、ページを更新すると機能しない理由です。後で Explosion Pills のソリューションを試し、必要に応じて賛成/承認します。

4

3 に答える 3

2

問題は、上部の画像がレンダリングされず、最初に計算するときにその高さがレイアウトで考慮されないことですstickyHeaderTop。2 つの解決策があります (どちらも非常に単純です)。

  1. 上部 ( の内側) に正しいwidthとheight属性を追加します。とにかくこれを行うのは良い考えです。<img><a id="home_link">
  2. stickyHeaderTop最初は計算しないでください。代わりに比較を行い$(window).scrollTop() > $("#stickyMenu").offset().topます。目立たない効率の低下は、正確に計算する価値があります。

必要に応じて、両方を行うこともできます。

于 2013-01-31T01:41:31.853 に答える
1

私は同じ問題でクロムを扱ってきました、それはこのバグを引き起こす2つの可能性があるかもしれません：

  • 条件内変数を使用しないif( $(window).scrollTop() > stickyHeaderTop ) {

  • css()次のように関数の順序を変更してみてください。

    $（'＃stickyAlias'）。css（'display'、'block'）;

    $（'＃stickyMenu'）。css（{position：'fixed'、top： '0px'}）;

このサイトを構築している間、私はこれらのせいで1年前に問題を抱えています。

両方が機能しない場合は、次の方法で試してください。

これがjsFiddleの動作です。

$(window).scroll(function() {

   var headerH = $('.header').outerHeight(true);
   console.log(headerH);
   //this will calculate header's full height, with borders, margins, paddings

   var scrollVal = $(this).scrollTop();
    if ( scrollVal > headerH ) {
        $('#subnav').css({'position':'fixed','top' :'0px'});
    } else {
        $('#subnav').css({'position':'static','top':'0px'});
    }
 });

ソース。

于 2013-01-31T00:50:18.510 に答える
1

レンダリングが完了する前にdocument.readyイベントが発生していると思います。ドキュメントloadのイベントではなく、ウィンドウのイベントをサブスクライブしてみてください。ready何かのようなもの：

function scrollSpy(){
// Check the initial Poistion of the Sticky Header
    var stickyHeaderTop = $('#stickyMenu').offset().top;

    $(window).scroll(function(){
            if( $(window).scrollTop() > stickyHeaderTop ) {
                    $('#stickyMenu').css({position: 'fixed', top: '0px'});
                    $('#stickyAlias').css('display', 'block');
                } else {
                    $('#stickyMenu').css({position: 'static', top: '0px'});
                    $('#stickyAlias').css('display', 'none');
            }
    });
}
window.addEventListener('load', scrollSpy, false);
于 2013-01-31T01:32:50.253 に答える