Twitter Bootstrap fixed-to-top Navbar auf Bildlauf mit in-Seite Anker Links Bouncing

Question

Ich habe eine Webseite mit einer oberen horizontalen Navigationsleiste - es ist Twitter Bootstrap Fixed Top Navbar, um genauer zu sein - mit einer unteren festen Position (Tatsächlich wird es nicht wirklich von CSS korrigiert; siehe unten). Die Navigationsleiste wird also zuerst unten auf der Seite angezeigt und später beim Scrollen oben auf der Seite angezeigt (position: fixed; top: 0).

Ich habe die Navigationslinks mit Anker-Tags eingerichtet, um den Betrachter an verschiedene Stellen im Hauptteil der Seite zu bringen. Leider nimmt es manchmal den Benutzer etwas zu weit unten (besonders wenn der Benutzer oben auf der Seite ist und die Navigationsleiste noch nicht fixiert wurde).

einen Blick auf meine HTML-Struktur Nehmen:

<div id="landing"></div> 
<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <div class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
     <li><a href="#landing">Home</a></li> 
     <li><a href="#section1">Section 1</a></li> 
     <li><a href="#section2">Section 2</a></li> 
     <li><a href="#section3">Section 3</a></li> 
     </ul> 
    </div> 
    </div> 
</nav> 
<div id="section1"></div> 
<div id="section2"></div> 
<div id="section3"></div> 

ich folgende JavaScript bin mit sicher, dass die navbar klebt an der Spitze der Seite nach unten scrollen:

function init() { 
    nh = 50; // navbar height 
    sh = $(window).height(); 
    ih = sh-nh;    
    $("#landing").css('height', ih+'px'); 
} 

function navbarState() { 
    if ($(window).scrollTop() > ih) { 
     $('.navbar').addClass('navbar-fixed-top'); 
     } else { 
     $('.navbar').removeClass('navbar-fixed-top'); 
     } 
} 

init(); 
navbarState(); 

$(window).on('load scroll resize orientationchange', function() { 
    init(); 
    navbarState(); 
}); 

One kann beobachten, dass wiederholtes Drücken der ersten Ankerverbindung einen Bounce-Effekt verursacht. Wie kann ich das verhindern?

Mein Ziel ist es, die Navigation zu den richtigen Ankern scrollen zu lassen, egal ob der Benutzer auf der Zielseite ist oder nicht.

Answer 1

Warum nicht auch navbar-fixed-bottom verwenden?

Siehe hier: https://jsfiddle.net/y7soL4ej/

---

ich die erwähnte Klasse als Standard nav hinzugefügt. Und modifizierte kleinere Dinge:

CSS

html, body, div#landing { 
    height: 100% 
} 
section, [id*=section] { 
    padding-top: 52px; 
} 

JS

function init() { 
    nh = 50 + 2; // navbar height + 2x border width (top + bottom) 
    sh = $(window).height(); 
    ih = sh-nh;    
    //$("#landing").css('height', ih+'px'); 
} 

function navbarState() { 
    if ($(window).scrollTop() > ih) { 
     $('.navbar').removeClass('navbar-fixed-bottom').addClass('navbar-fixed-top'); 
     } else { 
     $('.navbar').removeClass('navbar-fixed-top').addClass('navbar-fixed-bottom'); 
     } 
} 

init(); 
navbarState(); 

$(window).on('load scroll resize orientationchange', function() { 
    init(); 
    navbarState(); 
}); 

---

Das schreckhaft Verhalten: Wenn der navbar am Boden in Ihrem Beispiel ist es ein Teil von der dom flow - es trennt die landung div und die section1 div durch seine Höhe. Sobald es angeklickt wird, springt der Browser zum Ort, die Navigationsleiste wird dann oben fixiert - und ist nicht mehr Teil des Flusses (die beiden Divs sind nicht mehr voneinander getrennt). Die Sektion divs werden daher entsprechend bis zur Landung div verschoben. Ein erneutes Klicken auf den gleichen Abschnittsanker führt zu einem zusätzlichen Sprung, da der Abschnitt aufgrund der Landung von position:static zu position:fixed neu positioniert wurde.

Das ist ein weiterer Grund, warum ich empfehle, navbar-fixed-bottom zu verwenden.

---

aktualisieren

neue Geige: https://jsfiddle.net/y7soL4ej/2/

I entfernt .navbar-fixed-bottom von HTML und JS als navbar sollte von unten nach oben nicht springen. Um es glatt zu machen und das früher erwähnte Sprungverhalten zu vermeiden, musste ich es auf absolute Position setzen.

einige CSS benötigt hinzugefügt werden:

div#landing { 
    padding-bottom: 72px; 
    margin-bottom: -72px; 
} 

nav.navbar { 
    position: absolute; 
    left: 0; right: 0; 
} 
nav.navbar.navbar-fixed-top { 
    position: fixed; 
}