Wie kann ich die Bootstrap-Navigationsleiste nach dem Scrollen eines Divs nach oben korrigieren?

Ich versuche, meine Navbar mit Bootstrap nach einem bestimmten div, genannt "A" zu erscheinen. Div "a" ist an der Spitze von Seite und hat eine Höhe von etwa 400px. Sobald der Benutzer an div "a" und der Bildlaufleiste vorbei scrollt, möchte ich, dass die Bildlaufleiste oben bleibt. Ähnlich wie etwas wie dieses: https://www.facebook.com/home, aber ich habe kein Video an der Spitze, es ist ein Bild.Wie kann ich die Bootstrap-Navigationsleiste nach dem Scrollen eines Divs nach oben korrigieren?

Können wir tun, dass wir Bootstrap selbst?

Danke!

Quelle

2013-04-05 abisson

Ich schrieb eine jQuery-Plugin, dies zu tun - http://drewdahlman.github.com/Pinned/

Super einfach - einfach Ihre Kopfposition absolute und positionieren Sie sie machen - dann die jQuery-Plugin einrichten -

$("#element").pinned({ 
    bounds: 100, // when to become sticky 100px 
    scrolling: 0, // position during scroll 0px 
});

Das sollte es tun!

Prost!

Quelle

2013-04-05 16:25:16

Um die Effektanzeige auf facebook.com/home zu erhalten, sollte Ihre Navbar-Position auf statisch (oder relativ/absolut) gesetzt werden, bis der Benutzer 400px scrollt und dann seine Position auf fixed setzen muss oben auf dem Bildschirm. Dies kann mit ein wenig Javascript erfolgen.

Quelle

2013-04-05 16:22:34

Wenn Sie dies mit Twitter Bootstrap erreichen möchten, überprüfen Sie die 'Affix' js. Sie definieren den "festen" Punkt mit dem "Daten-Offset-Top" und dann wird die Navigationsleiste nach oben fixiert, wenn der Benutzer nach unten scrollt.

CSS:

#con .well { 
    height:390px; 
} 

#nav.affix { 
    position: fixed; 
    top: 0; 
    width: 100% 
}

HTML:

<div class="container" data-spy="affix" data-offset-top="400" id="nav"> 
    <div id="nav" class="navbar"> 
     <div class="navbar-inner"> ...

Javascript:

$('#nav').affix();

Hier ist die Arbeits Geige: http://jsfiddle.net/skelly/df8tb/

Hier ein funktionierendes Beispiel (aktualisiert für Bootstrap 3): http://bootply.com/90936

Quelle

2013-04-05 17:16:58 ZimSystem

Große Antwort. Upvoted weil Affix.js ein Teil des offiziellen Bootstrap-Kerns ist, wo die anderen Antworten externe libs/code benötigen. – Jon

bitte folgen Sie einfach diesem. Wenn die Menüleiste die oberste Position erreicht hat, wird das Snap-Objekt nicht angezeigt.

<!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.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <style> 
    body { 
     position: relative; 
    } 
    .affix { 
     top:0; 
     width: 100%; 
     z-index: 9999 !important; 
    } 
    .navbar { 
     margin-bottom: 0px; 
    } 

    .affix ~ .container-fluid { 
    position: relative; 
    top: 50px; 
    } 
    #section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;} 
    #section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;} 
    #section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;} 
    #section41 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;} 
    #section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;} 
    </style> 
</head> 
<body data-spy="scroll" data-target=".navbar" data-offset="50"> 

<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;"> 
    <h1>Scrollspy & Affix Example</h1> 
    <h3>Fixed navbar on scroll</h3> 
    <p>Scroll this page to see how the navbar behaves with data-spy="affix" and data-spy="scrollspy".</p> 
    <p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels, and the links in the navbar are automatically updated based on scroll position.</p> 
</div> 

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span>       
     </button> 
     <a class="navbar-brand" href="#">WebSiteName</a> 
    </div> 
    <div> 
     <div class="collapse navbar-collapse" id="myNavbar"> 
     <ul class="nav navbar-nav"> 
      <li><a href="#section1">Section 1</a></li> 
      <li><a href="#section2">Section 2</a></li> 
      <li><a href="#section3">Section 3</a></li> 
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#section41">Section 4-1</a></li> 
       <li><a href="#section42">Section 4-2</a></li> 
      </ul> 
      </li> 
     </ul> 
     </div> 
    </div> 
    </div> 
</nav>  

<div id="section1" class="container-fluid"> 
    <h1>Section 1</h1> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
</div> 
<div id="section2" class="container-fluid"> 
    <h1>Section 2</h1> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
</div> 
<div id="section3" class="container-fluid"> 
    <h1>Section 3</h1> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
</div> 
<div id="section41" class="container-fluid"> 
    <h1>Section 4 Submenu 1</h1> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
</div> 
<div id="section42" class="container-fluid"> 
    <h1>Section 4 Submenu 2</h1> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
</div> 

</body> 
</html>

Referenz: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_scrollspy_affix&stacked=h

Quelle

2017-11-23 17:13:51

Wie kann ich die Bootstrap-Navigationsleiste nach dem Scrollen eines Divs nach oben korrigieren?

Antwort

Verwandte Themen