Come eseguire il bootstrap statico della barra di navigazione su fisso?

Mi piacerebbe rendere la barra di navigazione statica alla barra di navigazione fissa su scroll, quando raggiunge la parte superiore della pagina.

C’è un modo per farlo usando bootstrap 3 css o javascript?

Se non sbaglio, quello che stai cercando di ottenere si chiama Sticky navbar.

Con poche righe di jQuery e l’evento di scorrimento è piuttosto facile da ottenere:

 $(document).ready(function() { var menu = $('.menu'); var content = $('.content'); var origOffsetY = menu.offset().top; function scroll() { if ($(window).scrollTop() >= origOffsetY) { menu.addClass('sticky'); content.addClass('menu-padding'); } else { menu.removeClass('sticky'); content.removeClass('menu-padding'); } } $(document).scroll(); }); 

Ho fatto un rapido esempio di lavoro per te, spero che aiuti: http://jsfiddle.net/yeco/4EcFf/

Per farlo funzionare con Bootstrap è sufficiente aggiungere o rimuovere “navbar-fixed-top” invece della class “sticky” nel jsfiddle.

Utilizzare il componente affix incluso in Bootstrap. Inizia con un ‘navbar-static-top’ e questo lo cambierà quando verrà raggiunto l’altezza dell’intestazione (contenuto sopra la barra di navigazione) …

 $('#nav').affix({ offset: { top: $('header').height() } }); 

http://bootply.com/107973

Sono sicuro, cosa ti aspetti. Dai un’occhiata a questo violino, questo potrebbe aiutarti.

http://jsfiddle.net/JK52L/8/

L’HTML dovrebbe avere la class navbar-fixed-top o navbar-fixed-bottom .

HTML

  

JS

 $(document).scroll(function(e){ var scrollTop = $(document).scrollTop(); if(scrollTop > 0){ console.log(scrollTop); $('.navbar').removeClass('navbar-static-top').addClass('navbar-fixed-top'); } else { $('.navbar').removeClass('navbar-fixed-top').addClass('navbar-static-top'); } }); 

Ecco una soluzione che utilizza il plugin affisso di Bootstrap:

HTML:

 
...

Javascript:

 $('nav').affix({ offset: { top: $('header').height() } }); 

Imposta il padding-top sul tuo body uguale a quello dell’altezza del tuo nav modo che il contenuto sovrapposto dalla barra di navigazione fissa sia visibile.

 $('nav').on('affix.bs.affix', function (){ $('body').css('margin-top', $('nav').height()); }); $('nav').on('affix-top.bs.affix', function (){ $('body').css('margin-top', 0); }); 

Per far si che il nav attacchi in cima mentre si scorre aggiungi questo bit di CSS.

CSS:

 .affix { top: 0; } 

Ho affrontato lo stesso problema ma la soluzione che ha funzionato per me è stata:

HTML:

 
...

JavaScript:

 document.onscroll = function() { if( $(window).scrollTop() > $('header').height() ) { $('nav > div.navbar').removeClass('navbar-static-top').addClass('navbar-fixed-top'); } else { $('nav > div.navbar').removeClass('navbar-fixed-top').addClass('navbar-static-top'); } }; 

Dove header era il tag banner sopra la mia barra di navigazione

Impostato su nav

 style="position:fixed; width:100%;" 

Oppure puoi cambiare la posizione del div specifico usando il nome della class

 $(document).scroll(function(e){ var scrollTop = $(document).scrollTop(); if(scrollTop > 0){ //console.log(scrollTop); $('.header').css("position","fixed"); } else { $('.header').css("position","relative"); } }); 

hey tutti tutti sono sopra pensando che questo tutto quello che devi fare è avvolgere il nav in un simile di seguito:

csscode:

 #navwrap { height: 100px; (change dependant on hight of nav) width: 100%; margin: 0; padding-top: 5px; } 

HTML:

  

/ ** * Gestione scorrimento * / $ (documento) .ready (funzione () {

 // Define the menu we are working with var menu = $('.navbar.navbar-default.navbar-inverse'); // Get the menus current offset var origOffsetY = menu.offset().top; /** * scroll * Perform our menu mod */ function scroll() { // Check the menus offset. if ($(window).scrollTop() >= origOffsetY) { //If it is indeed beyond the offset, affix it to the top. $(menu).addClass('navbar-fixed-top'); } else { // Otherwise, un affix it. $(menu).removeClass('navbar-fixed-top'); } } // Anytime the document is scrolled act on it document.onscroll = scroll; 

});

imposta l’altezza massima di cui hai bisogno:

 .navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse { max-height: 700px; } 

Ecco la mia implementazione utilizzando il plugin Affix Bootstrap http://getbootstrap.com/javascript/#affix

Include alcuni problemi aggiuntivi aggiuntivi risolti (vedi sotto).

HTML:

  

Javascript:

 function set_sticky_panel() { var affixElement = $('#navbar-main'); var navbarElementHeight = $('#top_navbar').height(); // http://stackoverflow.com/questions/18683303/bootstrap-3-0-affix-with-list-changes-width var width = affixElement.parent().width(); affixElement.width(width); // http://stackoverflow.com/questions/3410765/get-full-height-of-element var affixElementHeight = $('#navbar-main').outerHeight(true); // https://finiteheap.com/webdev/2014/12/26/bootstrap-affix-flickering.html affixElement.parent().height(affixElementHeight); // http://stackoverflow.com/questions/23797241/resetting-changing-the-offset-of-bootstrap-affix $(window).off('.affix') affixElement.removeData('bs.affix').removeClass('affix affix-top affix-bottom') affixElement.affix({ offset: { // Distance of between element and top page top: function () { // how much scrolling is done until sticking the panel return (this.top = affixElement.offset().top - parseInt(navbarElementHeight,10)) } } }); // The replacement for the css-file. affixElement.on('affix.bs.affix', function (){ // the absolute position where the sticked panel is to be placed when the fixing event fires (eg the panel reached the top of the page). affixElement.css('top', navbarElementHeight + 'px'); affixElement.css('z-index', 10); }); } $(document).on('ready', set_sticky_panel); $(window).resize(set_sticky_panel); 

CSS:

Non è richiesto alcun css.

Se confrontato con l’implementazione standard il mio codice addizionale risolve questi problemi:

  1. La larghezza del pannello adesivo non si interrompe più durante l’evento di fissaggio.
  2. La necessità nell’utilizzo del file CSS è stata eliminata.
  3. La riformattazione delle dimensioni del pannello adesivo sull’evento di modifica della finestra (reattività) viene eseguita ora.
  4. Non aggiungere più flittering / jumping all’evento di fissaggio.

Se gestisci il codice in questo modo:

 

E css:

 .scroll { margin-bottom:50px; } .menu { position:absolute; background:#428bca; color:#fff; line-height:30px; letter-spacing:1px; width:100%; height:50px; } .menu-padding { // no style here anymore } 

Quindi la pergamena fastidiosa è sparita.

Il codice e il violino di compleet non sono stati originariamente creati da me, l’ho ottenuto da una risposta precedente in questo argomento. Il cambiamento nel codice è fatto da me

Fabian # Web-Stars

jsfiddle

 /** * Scroll management */ $(document).ready(function () { // Define the menu we are working with var menu = $('.navbar.navbar-default.navbar-inverse'); // Get the menus current offset var origOffsetY = menu.offset().top; /** * scroll * Perform our menu mod */ function scroll() { // Check the menus offset. if ($(window).scrollTop() >= origOffsetY) { //If it is indeed beyond the offset, affix it to the top. $(menu).addClass('navbar-fixed-top'); } else { // Otherwise, un affix it. $(menu).removeClass('navbar-fixed-top'); } } // Anytime the document is scrolled act on it document.onscroll = scroll; }); 
 .navbar-wrapper{ background:url('http://sofit.miximages.com/javascript/cad2441dd3252cf53f12154412286ba0.jpg'); height: 100vh; padding-top: 50px; } h1{ font-size: 50px; font-weight: 700; } #login-dp{ min-width: 250px; padding: 14px 14px 0; overflow:hidden; background-color:rgba(255,255,255,.8); } #login-dp .help-block{ font-size:12px } #login-dp .bottom{ background-color:rgba(255,255,255,.8); border-top:1px solid #ddd; clear:both; padding:14px; } #login-dp .social-buttons{ margin:12px 0 } #login-dp .social-buttons a{ width: 49%; } #login-dp .form-group { margin-bottom: 10px; } .btn-fb{ color: #fff; background-color:#3b5998; } .btn-fb:hover{ color: #fff; background-color:#496ebc } .btn-tw{ color: #fff; background-color:#55acee; } .btn-tw:hover{ color: #fff; background-color:#59b5fa; } @media(max-width:768px){ #login-dp{ background-color: inherit; color: #fff; } #login-dp .bottom{ background-color: inherit; border-top:0 none; } } 
      

Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue luctus placerat. Sed nisl sem, pellentesque at risus eget, consequat bibendum velit. Sed interdum accumsan luctus. Duis rhoncus suscipit hendrerit. Vestibulum ut lobortis diam. Donec magna est, euismod non ligula in, congue aliquet diam. Sed pellentesque erat nibh, et blandit quam auctor eget. Integer fringilla turpis ac sagittis mattis. In in metus posuere, tincidunt orci non, lobortis ipsum. Praesent porttitor orci a ligula facilisis porta. Nullam tincidunt feugiat dignissim.

Pellentesque cursus suscipit massa ut molestie. Duis malesuada consequat venenatis. Vestibulum accumsan lorem sit amet vehicula tristique. Donec nec mauris quis mi imperdiet vestibulum. Praesent tempor velit at posuere posuere. Mauris tellus diam, dictum sed molestie eu, lobortis nec diam. Mauris molestie nulla vulputate, lobortis urna eget, gravida erat. Phasellus in ullamcorper lacus, eget ullamcorper odio.

Quisque gravida nulla eros. Duis sit amet rhoncus felis. Etiam in malesuada nisl. Proin sit amet elit sit amet erat dapibus pretium. Duis a dignissim lacus, vitae mollis nunc. Donec ut tempor magna. Maecenas eget felis eget ipsum porttitor dapibus vitae vitae magna. Cras et felis eros. Nam dolor odio, bibendum ut ex eu, facilisis suscipit ipsum. Aliquam sit amet nunc volutpat, aliquet nunc ut, tempor augue. Pellentesque semper vestibulum lacinia. Nam lacinia erat interdum purus consequat elementum. Phasellus volutpat sed libero id molestie. Quisque nec iaculis nisl, vitae accumsan justo. Suspendisse sollicitudin metus in libero cursus tempor in eget enim.

Suspendisse nibh lacus, consequat et tincidunt eget, interdum mollis velit. Etiam lobortis ac tellus et pretium. Nunc a tincidunt nulla. Cras vel nulla in neque accumsan fermentum. Etiam ac erat leo. Vestibulum aliquam dignissim lectus, tincidunt consequat augue malesuada at. Pellentesque semper viverra elit quis vestibulum. Aliquam rutrum justo dignissim ligula fringilla, ac viverra metus efficitur.

Mauris quis nisi convallis, rhoncus odio non, sodales urna. Donec ac ante at nisi pulvinar eleifend. Duis vel suscipit est. Nullam quis aliquet eros. Maecenas tincidunt augue condimentum nisi pharetra, in molestie libero condimentum. In hac habitasse platea dictumst. Morbi quis elit id nunc faucibus egestas. Sed non vehicula ligula, quis viverra urna. Nunc nec eleifend elit. Sed aliquam nibh non turpis congue, a condimentum mauris dictum. Vivamus laoreet nulla vel elit consequat, non convallis nibh dapibus. Mauris maximus nibh maximus, sollicitudin odio nec, semper nunc. Nunc consequat convallis lobortis. Aliquam pulvinar porttitor lorem. Donec luctus, libero a interdum posuere, est tellus tincidunt risus, a fermentum lacus odio at metus. Donec maximus ante massa, imperdiet consequat magna lobortis sed.