Die Seite springt, wenn die Sticky-Navigation angezeigt wird

Ich versuche eine sticky navigation zu einer Seite hinzuzufügen, sobald Sie zum ersten Abschnitt blättern (Über Systemic Therapy).Die Seite springt, wenn die Sticky-Navigation angezeigt wird

View webpage here

See code on GitHub here

jedoch sobald die klebrige Navigation angezeigt wird, springt die Seite. Dies hat auch Auswirkungen darauf, wo die Seite landet, wenn Sie in der Navigationsleiste auf "Systemische Psychotherapie" klicken. Anstatt oben im Abschnitt zu landen, deckt es die Überschrift und die ersten Sätze ab. Dies geschieht jedoch nur, wenn Sie oben auf der Seite klicken.

Ich habe versucht, Waypoints mit:

$('.js--section-about-st').waypoint(function(direction) { 
    if (direction == "down") { 
     $('nav').addClass('sticky'); 
    } else { 
     $('nav').removeClass('sticky'); 
    } 
});

Und jQuery:

$(window).scroll(function() { 
    if ($(this).scrollTop() > 400){ 
    $('nav').addClass('sticky'); 
    } 
    else{ 
    $('nav').removeClass('sticky'); 
    }

Die Größe der Navigationsleiste reduziert, wenn es klebrig wird. Ich habe gelesen, dass dies dazu führen kann, dass die Seite springt, also habe ich versucht, es gleich groß zu halten, aber es springt trotzdem.

Kann mir bitte jemand helfen, herauszufinden, wo ich falsch liege?

Danke!

Quelle

2017-03-07 Brittany Ell

Wenn Sie ein Element position: fixed; erstellen, wird es aus dem Fluss der Seite entfernt, was bedeutet, dass es andere Elemente nicht beeinflusst. Jede Höhe, die es einmal belegt hat, ist ungültig. Here is an example of this behavior.

Die nicht-klebrige Navigation ist 105px, so dass, wenn es klebrig wird, werden alle Elemente nach der Navigation wird 105px diesen Raum zu besetzen nach oben bewegen. Erwägen Sie, 105px als padding-top auf die <body> anzuwenden, um die jetzt fehlende Navigationsleiste auszugleichen. Here is the same example from above, but with the fix now in place.

$(window).scroll(function() { 
    if ($(this).scrollTop() > 400){ 
    $('nav').addClass('sticky'); 
    $('body').css('padding-top', '105px'); //Height of non-stick nav 
    } 
    else{ 
    $('nav').removeClass('sticky'); 
    $('body').css('padding-top', ''); 
    } 
});

Quelle

2017-03-07 16:26:56 Santi

Das ist es behoben! Vielen Dank! Ich habe nicht einmal daran gedacht, dass die Navigationsleiste aus dem Fluss der Seite entfernt wurde. Macht jetzt vollkommen Sinn. –

Ich bin froh, dass ich geholfen habe. Wenn Sie der Meinung sind, dass diese Antwort Ihre Frage angemessen gelöst hat, betrachten Sie sie bitte als Antwort. (Http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) – Santi

Fertig! Sorry, ich bin noch ziemlich neu in Stack Overflow! –

Die Seite springt, wenn die Sticky-Navigation angezeigt wird

Antwort

Verwandte Themen