Position fixiert bleibt nicht behoben

Question

Ich habe ein Problem mit meiner festen Kopfzeile.

Auf meiner Homepage funktioniert die feste Kopfzeile. Dies wurde auf verschiedenen Computern und mobilen Geräten ordnungsgemäß getestet. Die gleiche feste Kopfzeile findet sich jedoch auf keiner anderen Seite, etwa einer Produktseite oder einem Blog-Post.

Was es tut, ist folgendes: 1) Es ignoriert die feste Positionierung und bleibt nicht an der Spitze. 2) Es wird falsche Breite (Breite: 1010px)

Dies ist mein jQuery-Skript zum Erkennen, ob ein Benutzer gescrollt hat, um die Klasse sticky der Kopfzeile hinzuzufügen.

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

Und das ist mein 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; 
} 

Ich bin nicht sicher, ob ich den Link von der Website veröffentlichen soll, aber es ist der einzige Weg the live version zu sehen. Um den beschriebenen Fehler zu sehen, gehen Sie auf eine beliebige Seite im Menü und schalten Sie die Gerätesymbolleiste von Chrome Console ein. Jedes Gerät wird es tun.

Was mache ich falsch?

Answer 1

Geben Sie bitte Ihren Code $(window).scroll(function() {... in die $(document).ready(function() { ein.

Answer 2

Ihr Problem ist zweifach. Ein

Part - Eine Klasse nicht auf den Körper Tag angewandt
Der Header von dieser bestimmten Auswahl in Ihrem CSS festgelegt wird:

body.new-template #header {} 

Dies ist auf der Homepage zufrieden wie die body a hat Klasse new-template, und damit der Header wird behoben.

Allerdings hat die body auf all Ihren anderen Seiten diese Klasse nicht und daher wird #header nicht behoben.

Sie können body.new-template aus dem Selektor in Ihrem CSS entfernen oder die new-template Klasse zum body Tag jeder Seite hinzufügen, auf der die Kopfzeile fixiert werden soll.

Teil - Ein Fehler in Chrom mit + Position festen Transformations
Es gibt dann auch einen Fehler in Chrome position: fixed und Transformationen beziehen. https://bugs.chromium.org/p/chromium/issues/detail?id=20574

Sie haben eine hier zu verwandeln, die bricht Ihre position: fixed:

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); 
} 

Damit entfernen und fügen Sie die .new-template Klasse Ihr Problem zu lösen.