La barra di navigazione appiccicosa lampeggia quando si raggiunge il fondo della pagina

Question

Recentemente ho spostato la barra di navigazione in modo che funga da barra di navigazione appiccicosa che aderisce alla parte superiore della pagina dopo che si scorre verso il basso fino a un certo punto, tuttavia, quando raggiungo il fondo della mia pagina l'intera barra di navigazione lampeggia e talvolta scompare. Pensala come una vecchia TV che tremolerebbe e rischieresti di colpire da un lato per fermare lo sfarfallio. Come potrei colpire la mia barra di navigazione per impedirlo di sfarfallio. Here è il mio sito in modo da poter testimoniare tutta la gloria dello sfarfallio.

Ecco il mio codice HTML per la navigazione:

<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--> 

Ed ecco la mia JS:

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

Una nota importante dovrebbe essere che questo ha cominciato solo che si verificano dopo che ho cambiato l'offset nel mio JS da offset: $('#nav').position() a offset: 675. Si potrebbe dire, beh, basta cambiarlo di nuovo, ma con il vecchio offset, la mia navicella appiccicosa salterà prematuramente verso l'alto.

Grazie per qualsiasi aiuto di input, potete fornirmi!

Answer 1

Il tuo sito mi sta bene, ma sono stato portato qui cercando una soluzione allo stesso problema, quindi ho pensato di aggiungere la mia esperienza qui.

Il problema era che il codice di apposizione applica una classe (ad esempio affix o affix-bottom) all'elemento affisso in base alla sua posizione verticale sulla pagina. Chiamerò queste "zone".

Se il CSS per la nuova classe è tale che muove l'elemento apposta verticalmente, può finire istantaneamente in un diverso zona , quindi la classe viene rimosso, quindi si muove indietro, quindi viene applicata la classe ecc ... La posizione si alterna quindi a ogni evento onscroll e sfarfallio.

La chiave per me era garantire che i valori data-offset-top/data-offset-bottom e le classi CSS fossero impostati in modo tale che l'elemento non si sposti più verticalmente quando si aggancia l'affisso. OSSIA Qualcosa di simile:

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

(Il data-offset-bottom è quello di ricollegare l'elemento in modo che non va in crash in un piè di pagina ad esempio alto, e non sarà sempre necessario.) E poi:

.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. */ 
} 

volte il salto quando le classi CSS vengono modificate spinge l'elemento ulteriormente in nella zona in cui si sta inserendo, che porta a un singolo "tocco" al limite, ma non a uno sfarfallio ripetuto.

N.B. Penso che il leggerissimo salto quando il tuo menu diventa fisso potrebbe essere attenuato in questo modo, apportando una leggera regolazione alla posizione verticale dell'elemento quando apposto, e/o impostando data-offset-top su un valore appropriato.

Cheers,

Leo

Answer 2

Il problema per me era che il mio contenuto della pagina era più piccolo il mio menu, in modo che quando il menu è stato cambiato alla posizione fissa che ha causato la pagina per restringere.Ho impostato il contenuto con altezza minima con questo (coffeescript):

$ -> 
    $('.content').css('min-height', -> 
    $('.bs-docs-sidebar').height()) 

E tutto ha funzionato come un fascino.

Answer 3

risposta da questo Bootstrap 3 Fixed Top Navbar...

Basta aggiungere il seguente al .navbar

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

Answer 4

Basta aggiungere questo alla vostra classe CSS.

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