2013-06-12 15 views
8

Ho una barra di navigazione che inizia a circa 200 px dalla parte superiore della pagina in caricamento. Mentre scorro verso il basso, vorrei che la barra di navigazione "si fissi" sulla parte superiore della pagina e sia visibile mentre faccio scorrere il resto del contenuto. Sono in grado di mantenere la barra di navigazione in posizione anche se 200px dall'alto, e ignora il contenuto che ho tirato a destra e lo sposta tutto a sinistra. ho bisogno di essere assicurato che la barra di navigazione rimane visibile e che il layout/stile è lo stesso per tutto il percorso.twitter bootstrap fix navbar dopo lo scrolling

di seguito è la mia jsfiddle che mostra ciò che sto avendo problemi con

<!-- Begin Logo/Search --> 
    <header class="masthead"> 
     <div class="row"> 
     <div class="span6"> 
      <div class="logo pull-left"> 
       <h1><a href="/">name</a></h1> 
      </div> 
     </div> 
     <div class="span6"> 
      <div class="pull-right hidden-phone"> 
       <form class="search" action="/search" id="site-search"> 
        <input type="hidden" name="records" value="6"> 
        <div class="input-append"> 
         <input type="text" name="q" class="search_box" placeholder="Search" value="" autocomplete="off" /> 
         <button class="btn" type="submit"><i class="icon-search"></i></button> 
        </div> 
       </form>  
      </div> 
     </div> 
     </div> 
    </header>   


    <!-- Begin Navbar --> 
    <div> 
    <div class="navbar navbar-static"> 
     <div class="navbar-inner" id="mastnav"> 
     <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> 
      <div class="nav-collapse collapse"> 
       <ul class="nav"><li><a href="#">nav</a> </li></ul> 
       <ul class="nav pull-right"> 
        <li> 
         <a href="/cart"><i class="icon-shopping-cart"></i> <span id="cart-count">1</span></a> 
        </li> 
       </ul> 
      </div>  
     </div> 
     </div> 
    </div><!-- /.navbar --> 
    </div> 

JSFIDDLE

risposta

11

Una volta che il nav diventa affix non segue più i normali stili CSS della barra di navigazione. Puoi dare un ID al contenitore DIV esterno e quindi impostarlo come elemento 'affix'. Usa CSS per assicurarti che rimanga larghezza al 100%.

#nav.affix { 
    position: fixed; 
    top: 0; 
    width: 100% 
} 

Working Demo

+0

questa risposta funziona, sebbene ora la barra di navigazione superi la pagina sul lato destro –

+0

chiunque può ottenere questo in modo che la barra di navigazione non superi i limiti sulla finestra del browser –

2

Ecco l'jsfiddle modificato che compie ciò che si vuole:

Aggiornamento: mi dispiace! incollato il jsfiddle sbagliato! Realizzato quando semino il voto negativo! Lo farò di nuovo e di aggiornamento in un momento

Aggiornamento: ecco è:

http://jsfiddle.net/KUPbD/4/

Come nota in più, è possibile dichiarare l'affisso in HTML con data-spy="affix" e data-offset-top="", in modo che nessun è necessario un ulteriore script in linea

+0

Funziona su tutti i browser, tuttavia non funziona su dispositivi ipad o iPhone, qualche idea? - in realtà funziona ma c'è un ritardo –

+0

Il ritardo sui tablet è dovuto all'evento di scorrimento –

-2

È necessario affisso attaccato ad un contenitore esterno della barra di navigazione, ho fatto alcune modifiche ad esso ...

Nessun cambiamento su questo Js, ma la struttura html: -

$('#mastnav').affix({ 
     offset: { 
     top: 0 
     } 
    }); 

Demo: - http://jsfiddle.net/KUPbD/1/

2
<script type="text/javascript"> 
    $(document).ready(function(e) { 

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

    }); 
</script> 
Problemi correlati