Festnavigation und Anker

Question

Ich habe eine Navbar oben. Wenn die Seite geladen wird, ist sie "relativ". Wenn ich scrolle. es ändert sich zu "behoben". Es gibt ein Problem mit Ankern auf der Seite. Wenn die Seite geladen wird und ich oben auf der Seite bin, blicke ich durch Klicken auf den Link zu einem Anker in den Abschnitt und ein Teil davon wird ausgeblendet. Wenn ich denselben Link an dieser Stelle anklicke, scrollt er zum oberen Teil des richtigen Abschnitts.

Was kann ich tun, um dieses Problem zu beheben?

Die HTML

<nav id="fixedmenu"> 
<ul> 
    <li><a href="#brends">Brends</a></li> 
</ul> 
</li> 
... 
<section id="brends"></section> 

Die Javascript

$(document).ready(function() { 
    $('a[href^="#"]').click(function() { 
    var target = $(this.hash); 
    if (target.length == 0) target = $('a[name="' + this.hash.substr(1) + '"]'); 
    if (target.length == 0) target = $('html'); 
    $('html, body').animate({ scrollTop: target.offset().top }, 800); 
    return false; 
    }); 
    }); 

und

$(document).ready(function() { 
    var div = $('#fixedmenu'); 
    var start = $(div).offset().top; 
    var wnd = $(document).width(); 
    $.event.add(window, "scroll", function() { 
    var p = $(window).scrollTop(); 
    $(div).css('position',((p) > start && wnd > 319) ? 'fixed' : 'static'); 
    $(div).css('top',((p)>start) ? '0px' : ''); 
    $(div).width($('.container').width()); 
    $(div).css('box-shadow', '0px 3px 5px 0px rgba(50, 50, 50, 0.4'); 
    }); 
    }); 

UPD: auf diese Weise

Gelöst

$(document).ready(function() { 
    $('a[href^="#"]').click(function() { 
    var target = $(this.hash); 
    if (target.length == 0) target = $('a[name="' + this.hash.substr(1) + '"]'); 
    if (target.length == 0) target = $('html'); 
    var menuheight = $('#fixedmenu').height(); 
    var ofs = ($('#fixedmenu').css('position') == 'fixed') ? menuheight : menuheight * 2; 
    $('html, body').animate({ scrollTop: target.offset().top - ofs }, 800); 
    return false; 
    }); 
    }); 

Answer 1

Dieses Problem hat mit dem Fixed-Nav zu tun. Wenn ein Element repariert wird, wird es aus dem DOM entfernt und sitzt darüber. Daher wird der gesamte Inhalt um die Höhe der Navigationsleiste nach oben verschoben.

Was Sie tun müssen, ist ein Auffüllen auf Ihren Körper in CSS, die die Höhe der Navigationsleiste und Ihre Seite wird korrekt zu den Ankern blättern.

zB: Wenn die Navigationsleiste ist 50px hoch:

body{padding-top:50px} 

oder zu jedem Abschnitt:

section{padding-top:50px} 

je nachdem, was Ihre Seite aussieht - Sie die Polsterung festlegen möchten nur, wenn Das Nav ist behoben und entferne es, wenn es relativ ist. Oder halten Sie einfach die Polsterung an und haben Sie oben im Bereich Atmung Platz.

Ein anderer Weg, dies zu erreichen, ist ein auf die offset.top im Code-Offset zu entfernen:

$('html, body').animate({ scrollTop: target.offset().top - 50}, 800);