固定位置が固定されていない

Question

固定ヘッダーに問題があります。

私のホームページでは、固定ヘッダーが動作します。これは、さまざまなコンピュータやモバイルデバイスで適切にテストされています。しかし同じ固定ヘッダーは他のページ、例えば製品ページやブログ投稿にはありません。

以下のようになります。 1）固定位置を無視して、上に固定しません。 2）間違った幅になる（幅：1010px）

これは、ユーザーがスクロールしたかどうかを検出するためのjQueryスクリプトで、ヘッダーにクラスを追加します。

$(window).scroll(function() { 
    if ($(this).scrollTop() > 1){ 
     $("body.new-template #header").addClass("sticky"); 
    } else { 
     $("body.new-template #header").removeClass("sticky"); 
    }; 
}); 

これは私のCSSです。

body.new-template #header { 
position: relative; top: 0; left: 0; 
} 
body.new-template #header.sticky { 
    position: fixed; z-index: 100; width: 100%; 
    background-color: white; top: 0; left: 0; 
    -webkit-box-shadow: 0px 3px 10px #ccc; 
    -moz-box-shadow: 0px 3px 10px #ccc; 
    box-shadow: 0px 3px 10px #ccc; 
} 

私は私がウェブサイトが、the live versionを参照するには、その唯一の方法からリンクを投稿するかどうかを確認していません。次に、私が説明している間違いを確認するには、メニューからページを開き、Chrome Consoleのデバイスツールバーを切り替えます。どのデバイスでも可能です。

私は間違っていますか？

Answer 1

コード$(window).scroll(function() {...を$(document).ready(function() {に入れてください。

Answer 2

あなたの問題は2倍です。

第一部 - ヘッダがあなたのCSSでこの特定の選択によって固定されている
bodyタグには適用されないクラスは：bodyが持っているよう

body.new-template #header {} 

これはホームページで満たされていますクラスnew-templateであるため、ヘッダーは固定されます。

しかし、他のすべてのページではbodyにはこのクラスが含まれていないため、#headerは修正されていません。

body.new-templateをCSSのセレクタから削除するか、ヘッダーを固定する各ページのbodyタグにnew-templateクラスを追加することができます。

第二部 - +位置が固定変換とChromeのバグが
も、その後position: fixedと変換に関連するChromeのバグがあります。

body.new-template #page { 
    position: relative; 
    -webkit-transform: translate3d(0,0,0); 
    -ms-transform: translate3d(0,0,0); 
    -o-transform: translate3d(0,0,0); 
    -moz-transform: translate3d(0,0,0); 
    transform: translate3d(0,0,0); 
} 

だからを削除し、あなたの問題を解決するために.new-templateクラスを追加します。https://bugs.chromium.org/p/chromium/issues/detail?id=20574

はあなたのposition: fixedを破壊され、ここで変換を持っています。