it-swarm.com.de

wie halte ich eine Navigationsleiste oben auf der Seite?

Ich versuche, meine Navigationsleiste wie auf forbes.com oben auf der Seite zu halten.

Ich weiß, ich könnte tun

nav
{
   position: fixed;
   top: 0;
}

aber die Navigationsleiste befindet sich nicht oben auf der Seite, sondern folgt dem Logo ... Wenn Sie nach unten scrollen, soll die Navigationsleiste oben auf dem Bildschirm bleiben.

Das ist meine Seite

7
Adam Scot

die Lösung ist einfach. Behalten Sie Ihre CSS bei, während Sie px hinzufügen

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

Sie könnten es in JQuery so versuchen:

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-stickynavigation-bar-with-jquery/

5
mrtriangle

Es gibt eine Möglichkeit, dies ohne JQuery zu tun. Es funktioniert, indem Sie einen Scroll-Listener auf das Fenster setzen und die Klasse der Navigationsleiste wechseln, wenn der 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>

0
Oscar Belletti

In Ihrer CSS-Datei:

body {
    padding-top: 0px;
}
0
Andreas Damen

Auf diese Weise bleibt die Navigationsleiste am oberen Rand, nachdem Sie an ihr vorbeigescrollt haben.

.affix {
	top: 0px;
	margin: 0px 20px;
}
.affix + .container {
	padding: 5px;
}
<nav class="navbar navbar-default" data-spy="affix" data-offset-top="50">
...
</nav>

"navbar" erstellt einen eigenen Block, so dass Sie nur den Rand Ihrer CSS-Datei .navbar { margin: 0px auto; /*You can set your own margin for top-bottom & right-left respectively*/ z-index: 1; } erwähnen müssen. Der z-Index legt dem Element also Priorität fest Andere Elemente blättern nicht darüber. Wenn der z-Index einen positiven Wert hat, hat er die höchste Priorität, ansonsten die niedrigste Priorität (für negative Werte). Ich hoffe, das ist hilfreich.

0