Warum sticky nav zu springen, wenn eine Feste?

Meine website ist http://southsideonline.com/

Ich habe nur eine einfache sticky.js das behebt die navbar auf scrollen, aber der Inhalt unter dem nav springt unterhalb der Navigationsleiste. Irgendeine Idee, wie man dieses Problem beheben?

jQuery(function(){
  var menuOffset = jQuery('.menu-wrapper')[0].offsetTop;
  jQuery(document).bind('ready scroll',function() {
    var docScroll = jQuery(document).scrollTop();
    if(docScroll >= menuOffset) {
      jQuery('.menu-wrapper').addClass('fixed');
    } else {
      jQuery('.menu-wrapper').removeClass('fixed').removeAttr("width");
    }
   });
});

scheint, wie Ihr wohl leicht zu beheben. Ich habe versucht, mit jQuery .next (Nächstes), um das margin-top des nächsten .css-nach dem nav-passt unter dem nav, wie es sollte. irgendwelche anderen Ideen?

  • Was meinst du mit dem Inhalt unter dem nav springt unterhalb der nav-Leiste? Beziehen Sie sich, dass der Inhalt geht unter die Navigationsleiste beim scrollen? Ich sehe nichts ungewöhnliches auf Chrome 36.
  • Welchen browser benutzt du, dass man das sehen?
  • Nevermind, ich verstehe Ihre Frage jetzt. Ich kann das problem
InformationsquelleAutor Dlaugh14 | 2014-07-25
  1. 3

    Wickeln Sie Ihre <div class="menu-wrapper" id="menu-wrapper"> von einem anderen div (Platzhalter), und setzen Sie height zu 84px von CSS (gleich zu festen Menü-Höhe) oder über JS. Sie begegnet diesem problem, da die festen Elemente ausgeschlossen aus der Berechnung der Positionen.

    • Danke Mann! Das war es dann. In den Prozess der Festsetzung es für alle Bildschirmgrößen... ich habe nur seit über einem Jahr. Auf meine freie Zeit, also bin ich immer lernen. Dank einer Tonne!!!
    InformationsquelleAutor Andrei 'finelord' Baibakou
  2. 1

    Nachdem Sie Ihre navigation klebrig /fest, der rest des Layouts bewegt sich auf die Seite, um den Raum zu füllen, dass die navigation war, als es relativ positioniert ( oder mit der Strömung zunächst).

    • Dies ist nicht eine Antwort, dies ist eine Beschreibung des Problems.
    InformationsquelleAutor Evan
  3. 1

    Hinzufügen einer statischen Höhe auf Ihren Kopf, damit es nicht schrumpft, wenn die navigation-bar wird aus der Strömung, so etwas wie dieses:

    header { height: 117px; }

    Dass für mich gearbeitet.

    • hinzufügen einer statischen Höhe scheint nicht zu helfen...trotzdem danke
    • Andrei Baibakou unten war mehr spezifischen. Ich habe Höhe festlegen, aber ich musste das tun, um eine Platzhalter-div. Trotzdem danke!
    • Dieser arbeitete für mich, weil der nav war, die innerhalb der Kopfzeile. So, obwohl der nav wird klebrig und ist nicht enthalten in der Berechnung der Höhe, der Kopf bleibt in der gleichen Höhe und damit also nicht die Positionierung der rest der Seite Elemente. Danke!
    InformationsquelleAutor Jaime Gómez
  4. 0

    Hatte ich ein problem mit einer Ausrichtung in einem Behälter (300px Zentrum mit Rand), die soll ja auch behoben sein. Nachdem der Inhalt erreicht den container sprang leicht ( rund 2-5 px rechts ). Ich schaffte es respolve, indem Sie 0 margin und padding auf den Körper in css).

    InformationsquelleAutor moa
Schreibe einen Kommentar