web-dev-qa-db-fra.com

Quel est le code minimum pour faire ScrollSpy bootstrap sidebar comme l'exemple?

J'ai vu l'exemple ScrollSpy de gauche sur la page bootstrap:

http://Twitter.github.io/bootstrap/2.3.2/javascript.html#scrollspy

Mais ils n'ont pas d'exemple de code pour obtenir le même style et le même effet? Quel est le code minimum nécessaire pour y parvenir, car tous les exemples JsFiddle que j'ai vus n'ont pas le style.

Mise à jour

J'ai cessé d'utiliser scrollspy sur mes projets car la barre de défilement ne fonctionne qu'au niveau de la page, et j'ai besoin que la barre de défilement apparaisse uniquement sur le conteneur où le défilement a lieu

25
Zubair

Voyez si cela aide: http://jsfiddle.net/panchroma/rWYQu/

  1. Dans la balise body, ajoutez <body data-spy="scroll" data-target="#side-nav">
    (voir la colonne de gauche des options du violon)

  2. Enveloppez votre barre de navigation latérale dans une div avec ce même ID de cible de données: <div id="side-nav" >

  3. Vous voudrez probablement ajouter l'affixe de classe à votre navigation latérale pour qu'elle reste en place: <ul class="nav nav-pills affix">

  4. Ajoutez un ID unique à chacun des liens dans votre navigation latérale: par exemple <li><a href="#one">One</a></li>

  5. Dans le corps principal de la page, ajoutez des sections avec des ID qui correspondent aux liens dans votre barre latérale: par exemple <section id="one"> Section 1 </section>

C'est ça!

ÉDITER

Comment puis-je obtenir un style comme l'exemple Bootstrap sur leur site?

Voici une variante si vous voulez une coloration similaire à la page bootstrap
http://jsfiddle.net/panchroma/ExWDq/

Vous verrez que j'ai changé les classes de la liste de navigation ul pour mieux utiliser certains styles Bootstap intégrés, j'ai ajouté des chevrons aux liens de menu et ajouté des requêtes de style et de médias pour la liste de navigation.

41
David Taiaroa

En faisant des recherches sur l'utilisation de sidenav scrollspy, j'ai trouvé un bon tutoriel sur tout coder

Toute la source se trouve sur github

9
botheredbybees