Sticky Nav bar flackert beim Erreichen der Unterseite der Seite

Question

Ich gehe vor kurzem meine Nav-Leiste als eine sticky nav bar, die oben auf meiner Seite hält, nachdem ich bis zu einem bestimmten Punkt, aber wenn ich den Boden unten scrollen auf meiner Seite flackert die ganze Nav-Leiste und verschwindet sogar manchmal. Betrachten Sie es als einen alten Fernseher, der flackern würde und Sie am Ende schlagen würden, um das Flackern zu stoppen. Wie würde ich meine Navigationsleiste drücken, um zu verhindern, dass sie flackert? Here ist meine Website, so dass Sie die ganze Pracht des Flickers erleben können.

Hier ist mein HTML für das nav:

<div id="nav-wrapper"> 
<div id="nav" class="navbar navbar-inverse affix-top" data-spy="affix"> 
    <div class="navbar-inner" data-spy="affix-top"> 
    <div class="container"> 

     <!-- .btn-navbar is used as the toggle for collapsed navbar content --> 
     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </a> 

     <!-- Everything you want hidden at 940px or less, place within here --> 
     <div class="nav-collapse collapse"> 
     <ul class="nav"> 
      <li><a href="#home">Home</a></li> 
      <li><a href="#service-top">Services</a></li> 
      <li><a href="#contact-arrow">Contact</a></li> 
     </ul><!--/.nav--> 
     </div><!--/.nav-collapse collapse pull-right--> 
    </div><!--/.container--> 
    </div><!--/.navbar-inner--> 
</div><!--/#nav /.navbar navbar-inverse--> 
</div><!--/#nav-wrapper--> 

Und hier ist meine JS:

<script> 
    $(document).ready(function() { 
     $('#nav-wrapper').height($("#nav").height()); 
     $('#nav').affix({ 
      offset: 675 
     }); 
    }); 
</script> 

Ein sollte wichtiger Hinweis sein, dass dies geschieht erst begann, nachdem ich das in meinem JS Offset geändert von offset: $('#nav').position() bis offset: 675. Sie könnten sagen, ändern Sie es einfach zurück, aber mit dem alten Offset würde mein sticky nav vorzeitig an die Spitze springen.

Danke für jede Hilfe der Eingabe können Sie mir zur Verfügung stellen!

Answer 1

Ihre Website sieht jetzt gut aus, aber ich wurde hierher gebracht, um nach einer Lösung für das gleiche Problem zu suchen, also dachte ich, ich würde meine Erfahrung hier hinzufügen.

Das Problem, das ich hatte, war, dass der Affix-Code eine Klasse (z. B. affix oder affix-bottom) auf das befestigte Element basierend auf seiner vertikalen Position auf der Seite anwendet. Ich werde diese Zonen nennen.

Wenn das CSS für die neue Klasse so ist, dass es das angefügte Element vertikal verschiebt, kann es sofort in eine Zone enden, also wird die Klasse entfernt, also wird sie zurück verschoben, also wird die Klasse angewendet ... Die Position wechselt daher mit jedem onscroll Ereignis und flackert.

Der Schlüssel für mich war, sicherzustellen, dass die data-offset-top/10 Werte und CSS-Klassen und wurden so festgelegt, dass das Element nicht mehr vertikal bewegt, wenn das Affix wechselt. I.E. Etwas wie:

<div class="someClass" data-spy="affix" data-offset-top="20" data-offset-bottom="300"> 
    ... 
</div> 

(Die data-offset-bottom ist das Element wieder zu befestigen, damit es nicht in der nicht abstürze zB ein hohes Fußzeile, und wird nicht immer notwendig sein.) Und dann:

.someClass.affix { 
    /* position: fixed; already applied in .affix */ 
    top: 10px; 
    /* might also need e.g. width: 300px; as position: fixed; removes the element from its parent. */ 
} 
.someClass.affix-bottom { 
    position: absolute; /* Start scrolling again. */ 
    top: auto; /* Override the top position above. */ 
    bottom: 20px; /* It should stop near the bottom of its parent. */ 
} 

Manchmal der Sprung, wenn die CSS-Klassen geändert werden, drückt das Element weiter in die Zone, in die es eintritt, was zu einem einzigen "Streifen" an der Grenze führt, aber nicht wiederholt Flimmern.

N.B. Ich denke, dass der sehr leichte Sprung, wenn Ihr Menü fixiert wird, möglicherweise auf diese Weise geglättet werden kann, indem eine sehr kleine Anpassung an die vertikale Position des Elementes vorgenommen wird, und/oder indem data-offset-top auf einen geeigneten Wert gesetzt wird.

Cheers,

Leo

Answer 2

Das Problem für mich war, dass mein Seiteninhalt war kleiner als mein Menü, so dass, wenn das Menü in die festen Position geändert wurde, verursachte es die Seite zu verengen.Ich stelle den Inhalt min-height damit ein (coffeescript):

Und alles hat funktioniert wie ein Zauber.

Answer 3

Antwort von diesem Bootstrap 3 Fixed Top Navbar...

Fügen Sie einfach die

.navbar 
{ 
    -webkit-backface-visibility: hidden; 
} 

Answer 4

Fügen Sie einfach diese zu Ihrem CSS-Klasse .navbar folgen.

.navbar-fixed-top, .navbar-fixed-bottom { position:unset; }