Wie benutze ich Bootstrap scroll spy?

Ich kann den Scroll Spion nicht richtig mit einem vertikalen Nav arbeiten. Im Folgenden finden Sie den Code, den ich verwende. Aus irgendeinem Grund wird nur "Zwei" aktiv.Wie benutze ich Bootstrap scroll spy?

Jeder hat eine Idee, was ist los?

<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Twitter Bootstrap Scroll Spy Playground</title> 
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet"> 
    </head> 
    <body> 
    <div class="container"> 
     <div class="row"> 
     <div class="span3"> 
      <ul class="navbar nav nav-list affix"> 
       <li class="active"><a href="#one">One</a></li> 
       <li><a href="#two">Two</a></li> 
      </ul> 
     </div> 
     <div class="span1" data-spy="scroll"> 
      <section id="one"> 
      <h1>One</h1> 
      <h2>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. </h2> 
      </section> 
      <section id="two"> 
      <h1>Two</h1> 
      <h2>Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</h2> 
      </section> 
     </div> 
     </div> 
    </div> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script src="bootstrap/js/bootstrap.js"></script> 
</body> 
</html>

Quelle

2012-10-30 user1780429

Sie können dies tun, wie http://jsfiddle.net/mCxqY/

<body data-spy="scroll" data-target="#navbar"> 
    <div id="post1" class="box"> 
     <h1>Post 1</h1> 
     <p> Scroll Down↓</p> 
    </div> 
    <div id="post2" class="box"><h1>Post 2</h1></div> 
    <div id="post3" class="box"><h1>Post 3</h1></div> 

    <div id="navbar"> 
     <ul class="nav"> 
      <li><a href="#post1">Post 1</a></li> 
      <li><a href="#post2">Post 2</a></li> 
      <li><a href="#post3">Post 3</a></li> 
     </ul> 
    </div> 

    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-scrollspy.js"></script> 
</body>

css

@import url(http://twitter.github.com/bootstrap/assets/css/bootstrap.css); 
.box{ 
    margin: 20px; padding: 15px; 
    background: #eee; 
    height: 500px; 
} 
#navbar{ 
    position: fixed; 
    bottom: 0; left: 20px; 
    width: 100%; 
    background: #fff; 
} 
.nav li a{ 
    float: left; 
    width: 80px; 
    padding: 15px 0; 
} 
.nav li a:hover{ 
    color: #f33 !important; 
    background: none; 
} 
.nav li.active a{ 
    color: #f55; 
    text-decoration: underline; 
}

Quelle

2012-10-30 06:52:29

Danke für die Antwort. Ich weiß jedoch immer noch nicht, was mit dem ursprünglichen Code nicht stimmt. – user1780429

Eigentlich habe ich versucht, Ihr Beispiel in eine eigenständige Datei zu extrahieren, und es funktioniert nicht für mich. Siehe hier: https://dl.dropbox.com/u/18323746/Tmp/html-playground/try-stakoverflow-answer-original.html – user1780429

Die Geige scheint nicht zu funktionieren? Ich habe mehrere Browser versucht ... –

dies für mich in Aussortieren, ich habe festgestellt, dass das Element auf ausspioniert muss eine Bildlaufleiste haben.

Werfen Sie einen Blick auf diese Fiddle: http://jsfiddle.net/adamp/qgU6h/1/

Sie können entweder Spion direkt auf dem Körperelement ($('body').scrollspy()) oder Ihre Inhalte eine explizite Höhe geben und es zu zwingen, eine Scrollbar zu zeigen.

(Wenn man sich die Bootstrap aussehen documentation example, es macht die Fest Höhe Trick.)

Quelle

2013-03-28 15:14:50

* * Dokumentation Beispiel ** Link ist tot, Sie können es [hier] (http://twitter.github.io/bootstrap/2.3.2/javascript.html#scrollspy) jetzt finden. –

Ich habe die scrollspy Dokumentation Url in der Post bearbeitet. –

+1 für das "ausspionierte Element muss eine Bildlaufleiste haben", das war der Trick für mich! – David

Nach Stunden der Frustration und Forschung, kam ich, dass viele Menschen erfreut, auch nicht mit Bootstrap Affix in der Dokumentation zu finden sind (www.mtjhax.wordpress.com). Schließlich, obwohl die umsah, war diese Lösung von Carol Skelly für mich: http://bootply.com/63937

Sagen Sie Ihre Navigation die ID „navbar“ hatte, sollte der Körper wie folgt aussehen:

<body data-spy="scroll" data-target="#navbar"> 
    ... 
</body>

Und die navbar selbst sollte wie folgt:

<div class="navbar" id="navbar"> 
    <ul class="nav navbar-nav"> 
     <li>...</li> 
     <li>...</li> 
     <li>...</li> 
    </ul>    
</div>

Sie dann das Plugin initialisiert ...

$('#nav').affix({ 
    offset: {top: 0} 
});

der Navigation richtiges Styling 10

... und geben:

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

Quelle

2013-08-12 20:16:40

Die Frage bezieht sich auf die Scrollspy-Funktion, nicht die Affix eins. – chikamichi

ich zwei Dinge zu tun hatte, für mich zu bekommen scrollspy zu arbeiten.

Erstens, ich hatte eine Höhe mit dem <body> Elemente zu geben:

<style> 

    .body 
    { 
    height: 100%; 
    } 

</style>  

<body data-spy="scroll" data-target="#scrollElement" data-offset="0">

Ich denke ist dies, weil Scroll-Spion versucht, die Höhe des Elements zu erhalten, die Sie auf sind Spionage, Wenn jedoch für Ihr Element keine Höhe angegeben ist, wird ein Nullwert (oder 0?) übergeben, der die Berechnungen des Skripts zu unterbrechen scheint.

Zweitens musste ich sicherstellen, dass zwischen meinen ID-Elementen (auf die die Nav-Anker zeigen) genügend vertikaler Abstand vorhanden war.

Ich konnte nicht genau herausfinden, wie viel Platz erforderlich ist (abhängig vom Datenoffset-Attribut, was wahrscheinlich etwas damit zu tun hat), aber ich denke, wenn Sie eine Höhe haben Ihr Spy-Element und scrollspy funktionieren immer noch nicht - fügen Sie einfach mehr Inhalt zwischen Ihren ID-Elementen hinzu.

Quelle

2014-07-18 01:15:21 Jerreck

Dank Jerreck konnte ich mir arbeitet mit Hilfe von

height: 100%;

im Körper Wähler meines CSS

auch machen, wie die Jungs von Bootstrap empfohlen http://getbootstrap.com/javascript/#scrollspy

Ich habe position: relative; im Körper auch hinzugefügt.

Der Beginn des Körpers Wähler in meinem CSS geht so:

body { 
    position: relative; 
    height: 100%; 
    /* … */ 
}

Im <body> in HTML I

data-offset="0"

so ist es nun wie folgt

<body data-spy="scroll" data-target="#navigation">

entfernen musste

Quelle

2014-08-18 00:34:02

$(window).scroll(function() { 
    if ($(".navbar").offset().top > 50) { 
     $(".navbar-fixed-top").addClass("top-nav-collapse"); 
    } else { 
     $(".navbar-fixed-top").removeClass("top-nav-collapse"); 
    } 
}); 

//jQuery for page scrolling feature - requires jQuery Easing plugin 
$(function() { 
    $('a.page-scroll').bind('click', function(event) { 
     var $anchor = $(this); 
     $('html, body').stop().animate({ 
      scrollTop: $($anchor.attr('href')).offset().top 
     }, 1500, 'easeInOutExpo'); 
     event.preventDefault(); 
    }); 
});

Quelle

2016-06-23 12:14:27

Ich habe es so gemacht. für Datenziel verwende ich die Klassennamen .navbar

 <body data-spy="scroll" data-target=".navbar" data-offset="50"> 
     <nav class="navbar navbar-default navbar-fixed-top" >

Quelle

2017-06-25 23:43:03

Antwort

Verwandte Themen