Wie behalte man die Navigationsleiste zentriert, wenn sie markiert ist?

Question

Wenn ich an einem kürzlichen Projekt arbeitete, wollte ich einen scroll-then-fix-Header hinzufügen. Ich habe das gründlich recherchiert, aber viele der Online-Quellen waren wenig hilfreich, da sie sich auf ältere Versionen verschiedener Sprachen stützten oder sich weitgehend auf unerklärliche "magische Zahlen" stützten. Schließlich entschied ich mich einfach zu kodieren selbst, und erzeugt die folgenden:

$(document).ready(function(){ 
    var elementPosition = $('#navbar').offset(); 
    $(window).scroll(function() { 
     if ($(window).scrollTop() > elementPosition.top) { 
      $('#navbar').css('position', 'fixed').css('top', '0'); 
     } else { 
      $('#navbar').css('position', 'static'); 
}})}); 

Das funktionierte hat die navbar an die Spitze klebrig, aber wenn es aktiviert es Stickies es nach oben links, statt seine zentrierte Position der Aufrechterhaltung . Alles, was ich ändern will, ist die 'Position' und das Attribut 'oben', also sehe ich keinen Grund dafür, dass es sich plötzlich seitwärts verschiebt. Ich würde sehr schätzen alle Fixes oder Erklärungen, die Sie haben können. Als Referenz ist hier die relevanten HTML:

<div id="navbar"><ul> 
    <li id="activePage"><a href="">Home</a></li> 
    <li><a href="">About</a></li> 
    <li><a href="">Upcoming events </a><li> 
    <li><a href="">Contact Us</a></li> 
    <li><a href="">Contribute</a></li> 
</ul></div> 

und CSS:

#navbar { 
    background-color: white; 
    z-index: 1; 
} 

#navbar ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    text-align: center; 
    width: 100%; 
} 

#navbar li { 
    text-align: center; 
    display: inline; 
} 

#navbar ul #activePage a { 
    color: #cec8c8; 
} 

#navbar li a { 
    color: black; 
    padding: 14px 35px; 
    text-decoration: none; 
    font-family: 'Roboto Slab'; 
    font-size: 25px; 
    text-align: center; 
} 

Vielen Dank im Voraus für irgendwelche und alle helfen Ihnen bieten können!

Answer 1

Das Problem ist, dass ein absolut oder fest positioniertes Element nur den Platz auf dem Bildschirm als Inhalt in Anspruch nimmt. So geht das Element von einem Standardblockelement, das 100% Breite des Bildschirms einnimmt, zu einem fest positionierten Element, das nur die Breite einnimmt, die es von dem Inhalt darin benötigt.

Eine einfache Möglichkeit, dies zu beheben, besteht darin, dem Element left: 0; right: 0; hinzuzufügen, damit es die Breite des Fenster-Viewports überspannt.

können Sie tun, indem Sie diese Zeile zu ändern

$('#navbar').css('position', 'fixed').css('top', '0'); 

zu

$('#navbar').css('position', 'fixed').css({'top':'0','left':'0','right':'0'}); 

Sie auch width: 100%; dem Element zuordnen können stattdessen aber dann müssen Sie darauf achten, irgendwelchen Boxmodell Fragen, die könnte auftreten oder box-sizing: border-box; verwenden, um zu verhindern, dass sich das Navigationsfenster über die Breite des Ansichtsfensters hinaus erstreckt, falls Sie eine Auffüllung oder Ränder verwenden, die dazu führen könnten, dass die Breite über 100% hinausgeht.