come faccio a mantenere una barra di navigazione nella parte superiore della pagina?

Question

Sto cercando di fare il mio bar soggiorno di navigazione nella parte superiore della pagina come su forbes.com

So che potrei fare

nav 
{ 
    position: fixed; 
    top: 0; 
} 

ma la barra di navigazione non è al top della pagina , viene dopo il logo ... Quando si scorre verso il basso invece, voglio che la barra di navigazione per aderire alla parte superiore dello schermo ..

This is my site

Answer 1

Usa posizione assoluta e impostare il valore superiore al numero di pixel che vuoi t La barra di navigazione si trova nella parte superiore del browser.

Answer 2

Si potrebbe provare in JQuery come questo:

HTML:

<div id="wrapper"> 

    <header> 
    <h1>Floater Navigation</h1> 
    </header> 

<nav> 
    <p>Navigation Content</p> 
    </nav> 

    <div id="content"> 
      <p>Lorem Ipsum.</p> 
    </div> 
</div> 

CSS:

#wrapper { 
width:940px; 
margin: 0 auto; 
} 

header { 
text-align:center; 
padding:70px 0; 
} 

nav { 
background: #000000; 
height: 60px; 
width: 960px; 
margin-left: -10px; 
line-height:50px; 
position: relative; 
} 

#content { 
background: #fff; 
height: 1500px; /* presetting the height */ 
box-shadow: 0 0 5px rgba(0,0,0,0.3); 
} 

.fixed { 
     position:fixed; 
} 

JQuery:

$(document).ready(function() { 

    //Calculate the height of <header> 
    //Use outerHeight() instead of height() if have padding 
    var aboveHeight = $('header').outerHeight(); 

//when scroll 
    $(window).scroll(function(){ 

     //if scrolled down more than the header’s height 
      if ($(window).scrollTop() > aboveHeight){ 

     // if yes, add “fixed” class to the <nav> 
     // add padding top to the #content 
      (value is same as the height of the nav) 
      $('nav').addClass('fixed').css('top','0').next() 
      .css('padding-top','60px'); 

      } else { 

     // when scroll up or less than aboveHeight, 
      remove the “fixed” class, and the padding-top 
      $('nav').removeClass('fixed').next() 
      .css('padding-top','0'); 
      } 
     }); 
    }); 

fonte: http://www.jay-han.com/2011/11/10/simple-smart-sticky-navigation-bar-with-jquery/

Answer 3

la soluzione è semplice, mantenere il vostro css, mentre l'aggiunta px

nav 
{ 
    position: fixed; 
    top: 0px; 
} 

Answer 4

Ecco un modo per farlo senza JQuery. Funziona impostando un listener di scorrimento sulla finestra e cambiando la classe della barra di navigazione quando lo scorrimento raggiunge la posizione corretta.

var body = document.getElementsByTagName("body")[0]; 
 
var navigation = document.getElementById("navigation"); 
 

 
window.addEventListener("scroll", function(evt) { 
 
    if (body.scrollTop > navigation.getBoundingClientRect().bottom) { 
 
    // when the scroll's y is bigger than the nav's y set class to fixednav 
 
    navigation.className = "fixednav" 
 
    } else { // Overwise set the class to staticnav 
 
    navigation.className = "staticnav" 
 
    } 
 
});

h1 { 
 
    margin: 0; 
 
    padding: 10px; 
 
} 
 
body { 
 
    margin: 0px; 
 
    background-color: white; 
 
} 
 
p { 
 
    margin: 10px; 
 
} 
 
.fixednav { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.staticnav { 
 
    position: static; 
 
} 
 
#navigation { 
 
    background-color: blue; 
 
    padding: 10px; 
 
    width: 100%; 
 
} 
 
#navigation a { 
 
    padding: 10px; 
 
    color: white; 
 
    text-decoration: none; 
 
}

<h1> 
 
Hello world 
 
</h1> 
 
<nav id="navigation" class="staticnav"><a href="#">Home</a> <a href="#">About</a> 
 
</nav> 
 
<!-- We initialize the nav with static condition --> 
 
<p> 
 
    Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. 
 
    Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. 
 
    Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. 
 
    Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. 
 
    Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. 
 
    Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. 
 
    Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. 
 
    Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. 
 
    Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. 
 
    Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. 
 
</p>

Answer 5

Ecco come i bastoni della barra di navigazione all'inizio Dopo scorrimento passato.

.affix { 
 
\t top: 0px; 
 
\t margin: 0px 20px; 
 
} 
 
.affix + .container { 
 
\t padding: 5px; 
 
}

<nav class="navbar navbar-default" data-spy="affix" data-offset-top="50"> 
 
... 
 
</nav>

"navbar" crea un blocco su di essa la propria, quindi tutto quello che hai da fare è citare solo il margine nel file css .navbar { margin: 0px auto; /*You can set your own margin for top-bottom & right-left respectively*/ z-index: 1; } La priorità set z-index a quel particolare elemento, in modo che altri elementi non lo scorrano sopra. Se z-index ha un valore positivo, allora ha la priorità più alta, altrimenti la priorità più bassa (per i valori negativi). Spero che questo sia utile.