Wie behalte ich eine Navigationsleiste oben auf der Seite?

Question

Ich versuche, meine nav bar Aufenthalt am oberen Rand der Seite wie auf forbes.com

Ich weiß, dass ich

konnte

nav 
{ 
    position: fixed; 
    top: 0; 
} 

aber die Navigationsleiste ist nicht von der Seite an der Spitze zu machen , kommt es nach dem logo ... Wenn Sie jedoch nach unten scrollen, ich die Navigationsleiste auf den oberen Rand des Bildschirms halten wollen ..

This is my site

Answer 1

Verwenden Position absolut und legen Sie den oberen Wert auf die Anzahl von Pixeln willst du t Die Navigationsleiste befindet sich oben im Browser.

Answer 2

Sie könnten versuchen, es in JQuery wie folgt aus:

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'); 
      } 
     }); 
    }); 

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

Answer 3

die Lösung ist einfach, halten Sie Ihre CSS während px Hinzufügen

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

Answer 4

Hier ist ein Weg, um es ohne JQuery zu tun. Es funktioniert, indem Sie einen Scroll-Listener auf das Fenster setzen und die Klasse der Navigationsleiste wechseln, wenn die Scroll die richtige Position erreicht.

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

Dies ist, wie die Navigationsleiste klebt an der Spitze nach Vergangenheit blättern.

.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“ auf seine eigenen einen Block erzeugt, so alles, was Sie nur den Rand in der CSS-Datei .navbar { margin: 0px auto; /*You can set your own margin for top-bottom & right-left respectively*/ z-index: 1; } Die Z-Index setzt Priorität auf dieses spezielle Element zu tun haben zu erwähnen, damit andere Elemente nicht darüber scrollen. Wenn der Z-Index einen positiven Wert hat, hat er die höchste Priorität, andernfalls die niedrigste Priorität (für negative Werte). Ich hoffe, das ist hilfreich.