Erstellen einer sticky Navbar mit Twitter Bootstrap?

Ich versuche, eine Navigationsleiste einzuführen, die, wenn sie nicht mehr sichtbar ist, eine feste Kopfzeilenpositionierung annimmt. Ich begann mit diesem Thread: Replicating Bootstraps main nav and subnav.Erstellen einer sticky Navbar mit Twitter Bootstrap?

Seitdem bin ich angekommen: http://jsfiddle.net/yTqSc/2/.

Das Problem:

Die Anker Links ihr Ziel (darin versteckt die Ziellinie) überschreiten wird, wenn der navbar in seiner ursprünglichen Position ist, aber nicht, wenn es befestigt ist. Ich kann das Überschwingen beheben (ich habe mich auf http://nicolasgallagher.com/jump-links-and-viewport-positioning/demo/ bezogen), aber dann habe ich eine übermäßige Lücke mit den Links, wenn die Navigationsleiste repariert ist.

Kann jemand empfehlen, konsistente Ergebnisse zu erhalten, unabhängig davon, ob die Navbar fest ist oder nicht?

Danke.

Quelle

2012-08-24 espanapin

ist das wonach Sie suchen?

<div class="navbar navbar-fixed-top">

Quelle

2012-08-24 18:06:42 guleryuz

Ich bin mir nicht sicher, wie das die Frage beantwortet. Ich füge diese Klasse bereits dynamisch mit JavaScript hinzu und es scheint die Wurzel des Problems zu sein. Das inkonsistente Verhalten tritt auf, wenn diese Klasse nach dem Navigieren zu einer Ankerverknüpfung hinzugefügt wird. – espanapin

Sie haben kein CSS für navbar-fixed-top. Außerdem müssen Sie damit umgehen, wenn Sie rückwärts scrollen.

Siehe Demo http://jsfiddle.net/yTqSc/39/

JavaScript

$(document).scroll(function(){ 
var elem = $('.subnav'); 
if (!elem.attr('data-top')) { 
    if (elem.hasClass('navbar-fixed-top')) 
     return; 
    var offset = elem.offset() 
    elem.attr('data-top', offset.top); 
} 
if (elem.attr('data-top') <= $(this).scrollTop()) 
    elem.addClass('navbar-fixed-top'); 
else 
    elem.removeClass('navbar-fixed-top'); 
});

CSS

.subnav { 
    background:#FFF; 
} 
.navbar-fixed-top { 
    position:fixed; 
}

Oder verwenden Waypoints jQuery-Plugin klebrige Elemente zu behandeln.

Quelle

2013-04-05 22:47:25 steve

es war schön, aber ich habe verrückt sticky nav unten zu implementieren, anstatt oben, wie folgt aus: http://golkhaneh.tv3.ir/

wie kann das tun?

Quelle

2013-10-29 15:14:32

Erstellen einer sticky Navbar mit Twitter Bootstrap?

Antwort

Verwandte Themen