it-swarm.com.de

So erstellen Sie eine klebrige Navigationsleiste, die nach dem Scrollen oben fixiert wird

Ich versuche, eine Navigationsleiste zu erstellen, die beim ersten Laden der Site unten auf der angezeigten Seite angezeigt wird. Wenn der Benutzer nach unten scrollen, wird die Navigationsleiste nach oben verschoben und schließlich oben fixiert. Ich verwende Bootstrap, genau wie diese Site, aber ich kann nicht herausfinden, wie diese Site es getan hat. Irgendeine Hilfe?

Hier ist die Seite mit der Navigationsleiste, die ich zu emulieren versuche: http://www.blastprocessor.co.uk/

Hier ist mein Navigations-HTML- und CSS-Code:

HTML:

<div class="navbar navbar-fixed-top" id="navbar">
    <div class="navbar-inner">
        <div class="container">
            <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">
                <ul class="nav nav-pills">
                    <li class="active"><a href="#home">Home</a></li>
                    <li><a href="#service-link">Services</a></li>
                    <li><a href="#contact-link">Contact</a></li>
                </ul><!-- /.nav -->
            </div><!--/.nav-collapse -->
        </div><!-- /.container -->
    </div><!-- /.navbar-inner -->
</div><!-- /.navbar -->

Und hier ist mein CSS:

.navbar-fixed-top,.navbar-fixed-bottom{position:fixed; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}
.navbar .nav > li a{
    color:white; background:rgba(0,0,0,0.2); text-shadow:none; font-size:1.7em; font-family: marvel, serif; padding:.5em 1.3em; margin:1em 2em;
}
.navbar .nav > .active a:hover, .navbar .nav > li a:hover, .navbar .nav > .active a {
    color:white; ; background:#F90; text-shadow:none; font-size:1.7em; font-family: marvel, serif; padding:.5em 1.3em; margin:1em 2em;
}
.navbar .nav > li {padding:2em;}
.navbar.navbar-fixed-top .navbar-inner{background: rgba(255, 255, 255, 0);}
.navbar .nav, .navbar .nav > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
    padding:0 2em;
}
.navbar-inner {text-align:center;}
.navbar .navbar-inner, .navbar .navbar-inner {border: none; box-shadow: none; filter: none;}
36
Brian

Ich habe genau das gleiche gesucht. Ich hatte gelesen, dass dies in Bootstrap 3.0 verfügbar war, aber ich hatte kein Glück, es tatsächlich zu implementieren. Das ist, was ich mir ausgedacht habe und es funktioniert großartig. Sehr einfaches jQuery und Javascript.

Hier ist das JSFiddle zum Spielen mit ... http://jsfiddle.net/CriddleCraddle/Wj9dD/

Die Lösung ist anderen Lösungen im Web und StackOverflow sehr ähnlich. Wenn Sie dies nicht nützlich finden, suchen Sie nach dem, was Sie brauchen. Viel Glück!

Hier ist das HTML ...

<div id="banner">
  <h2>put what you want here</h2>
  <p>just adjust javascript size to match this window</p>
</div>

  <nav id='nav_bar'>
    <ul class='nav_links'>
      <li><a href="url">Sign In</a></li>
      <li><a href="url">Blog</a></li>
      <li><a href="url">About</a></li>
    </ul>
  </nav>

<div id='body_div'>
  <p style='margin: 0; padding-top: 50px;'>and more stuff to continue scrolling here</p>
</div>

Hier ist das CSS ...

html, body {
  height: 4000px;
}

.navbar-fixed {
  top: 0;
  z-index: 100;
  position: fixed;
  width: 100%;
}

#body_div {
  top: 0;
  position: relative;
  height: 200px;
  background-color: green;
}

#banner {
  width: 100%;
  height: 273px;
  background-color: gray;
  overflow: hidden;
}

#nav_bar {
  border: 0;
  background-color: #202020;
  border-radius: 0px;
  margin-bottom: 0;
  height: 30px;
}

//the below css are for the links, not needed for sticky nav
.nav_links {
  margin: 0;
}

.nav_links li {
  display: inline-block;
  margin-top: 4px;
}

.nav_links li a {
  padding: 0 15.5px;
  color: #3498db;
  text-decoration: none;
}

Fügen Sie nun einfach das Javacript hinzu, um die Korrekturklasse basierend auf der Bildlaufposition hinzuzufügen und zu entfernen.

$(document).ready(function() {
  //change the integers below to match the height of your upper dive, which I called
  //banner.  Just add a 1 to the last number.  console.log($(window).scrollTop())
  //to figure out what the scroll position is when exactly you want to fix the nav
  //bar or div or whatever.  I stuck in the console.log for you.  Just remove when
  //you know the position.
  $(window).scroll(function () { 

    console.log($(window).scrollTop());

    if ($(window).scrollTop() > 550) {
      $('#nav_bar').addClass('navbar-fixed-top');
    }

    if ($(window).scrollTop() < 551) {
      $('#nav_bar').removeClass('navbar-fixed-top');
    }
  });
});
33
SoEzPz

Note (2015): Sowohl die Frage als auch die Antwort unten beziehen sich auf die alte, veraltete Version 2.x von Twitter Bootstrap .

Dieses Feature zum Erstellen und Element "Sticky" ist in den Bootstrap von Twitter integriert und heißt Affix . Alles was Sie tun müssen, ist hinzuzufügen:

<div data-spy="affix" data-offset-top="121">
  ... your navbar ...
</div>

um Ihr Tag herum und vergessen Sie nicht, die JS-Dateien von Bootstrap zu laden, wie im manual beschrieben. Das Datenattribut offset-top gibt an, um wie viele Pixel die Seite (von oben) gescrollt wird, um die Menükomponente zu korrigieren. Normalerweise ist es nur der Platz oben auf der Seite.

Hinweis: Sie müssen sich um den fehlenden Speicherplatz kümmern, wenn das Menü festgelegt wird. Fixieren bedeutet, es aus Ihrer Seitenebene auszuschneiden und in einer anderen Ebene einzufügen, die nicht scrollt. Ich mache folgendes:

<div style="height: 77px;">
  <div data-spy="affix" data-offset-top="121">
    <div style="position: relative; height: 0; width: 100%;">
      <div style="position: absolute; top: 0; left: 0;">
        ... my menu ...
      </div>
    </div>
  </div>
</div>

dabei ist 77px die Höhe meiner angebrachten Komponente.

24

// in HTML

<nav class="navbar navbar-default" id="mainnav">
<nav>

// JQuery hinzufügen

$(document).ready(function() {
  var navpos = $('#mainnav').offset();
  console.log(navpos.top);
    $(window).bind('scroll', function() {
      if ($(window).scrollTop() > navpos.top) {
       $('#mainnav').addClass('navbar-fixed-top');
       }
       else {
         $('#mainnav').removeClass('navbar-fixed-top');
       }
    });
});

Hier ist das jsfiddle, um herumzuspielen: - http://jsfiddle.net/shubhampatwa/46ovg69z/

BEARBEITEN: Wenn Sie diesen Code nur für mobile Geräte anwenden möchten, können Sie Folgendes verwenden:

   var newWindowWidth = $(window).width();
    if (newWindowWidth < 481) {
        //Place code inside it...
       }
10
Shubham Patwa

Hier ist ein Beispiel für Bootstrap 3, für das keine zusätzliche jQuery erforderlich ist. Es verwendet das Affix-Plugin, das in Bootstrap 3 enthalten ist.

<!-- Content Above Nav -->
<header class="masthead">

</header>           


<!-- Begin Navbar -->
<div id="nav">
  <div class="navbar navbar-default navbar-static">
    <div class="container">
      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="glyphicon glyphicon-bar"></span>
        <span class="glyphicon glyphicon-bar"></span>
        <span class="glyphicon glyphicon-bar"></span>
      </a>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li class="divider"></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
        <ul class="nav pull-right navbar-nav">
          <li>
            ..
          </li>
          <li>
            ..
          </li>
        </ul>
      </div>        
    </div>
  </div><!-- /.navbar -->
</div>

Arbeitsdemo/Vorlage: http://bootply.com/69848

6
Zim

Das hat gut für mich funktioniert. Vergessen Sie nicht, dort, wo sich die Navigationsleiste befand, ein Füll-Div einzutragen, da sonst der Inhalt jedes Mal springt, wenn er fixiert/nicht fixiert ist.

function setSkrollr(){
    var objDistance = $navbar.offset().top;
    $(window).scroll(function() {
        var myDistance = $(window).scrollTop();
        if (myDistance > objDistance){
            $navbar.addClass('navbar-fixed-top');
        }
        if (objDistance > myDistance){
            $navbar.removeClass('navbar-fixed-top');
        }
    });
}
5
kaleazy

Bootstrap Affix verwenden:

/* Note: Try to remove the following lines to see the effect of CSS positioning */
  .affix {
      top: 0;
      width: 100%;
  }

  .affix + .container-fluid {
      padding-top: 70px;
  }
<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
</head>
<body>

<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
  <h1>Bootstrap Affix Example</h1>
  <h3>Fixed (sticky) navbar on scroll</h3>
  <p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
  <p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
</div>

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Basic Topnav</a></li>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
  </ul>
</nav>

<div class="container-fluid" style="height:1000px">
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
</div>

</body>
</html>

4
Deepak swain

Für Bootstrap 4 wurde dafür eine neue Klasse freigegeben. Nach den Utilties docs :

Übernehmen Sie die Klasse Sticky-Top.

<div class="sticky-top">...</div>

Weitere Optionen für die Position der Navigationsleiste finden Sie unter hier . Denken Sie auch daran, dass position: sticky; wird nicht in allen Browsern unterstützt, daher ist dies möglicherweise nicht die beste Lösung für Sie, wenn Sie ältere Browser unterstützen müssen.

3
mckenna

Sie könnten position: sticky verwenden.

#navbar {
  position: sticky;
  top: 0px;
}

Die #navbar sollte jedoch ein direktes Kind des Körpers sein.

1
Klaasvaak

Antwort auf Shubham Patwa: Auf diese Weise ist die Seite "sprunghaft", sobald die Klasse "navbar-fixed-top" gilt. Das liegt daran, dass der #mainnav in den DOM-Fluss des Dokuments ein- und ausfährt. Dies kann zu einer unschönen UX führen, wenn die Seite eine "kritische Höhe" hat und zwischen fester und nicht fixierter #mainnav-Position springt.

Ich habe den Code auf diese Weise geändert, was scheinbar gut funktioniert (nicht pixelgenau, aber gut):

$(document).ready(function() {
  var navpos = $('#mainnav').offset();
  var navheight = $('#mainnav').outerHeight();

$(window).bind('scroll', function() {
  if ($(window).scrollTop() > navpos.top) {
   $('#mainnav').addClass('navbar-fixed-top');
   $('body').css('marginTop',navheight);
   }
   else {
     $('#mainnav').removeClass('navbar-fixed-top');
     $('body').css('marginTop','0');
   }
});
1
Traumkunst

Ich habe dieses einfache Javascript-Snippet sehr nützlich gefunden.

$(document).ready(function()
{
    var navbar = $('#navbar');

    navbar.after('<div id="more-div" style="height: ' + navbar.outerHeight(true) + 'px" class="hidden"></div>');
    var afternavbar = $('#more-div');

    var abovenavbar = $('#above-navbar');

    $(window).on('scroll', function()
    {
        if ($(window).scrollTop() > abovenavbar.height())
        {
            navbar.addClass('navbar-fixed-top');
            afternavbar.removeClass('hidden');
        }
        else
        {
            navbar.removeClass('navbar-fixed-top');
            afternavbar.addClass('hidden');
        }
    });
});
0
Valdrinit