Quel est le minimum de code pour faire ScrollSpy bootstrap barre latérale, comme l'exemple?

J'ai vu la main gauche ScrollSpy exemple sur le bootstrap page:

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

Mais ils n'ont pas de code d'exemple de la façon d'obtenir le même style et l'effet? Quel est le code minimal nécessaire pour atteindre cet objectif, comme tous les JsFiddle exemples que j'ai vu n'ont pas le style.

Mise à jour

J'ai arrêté de l'utiliser scrollspy sur mes projets que la barre de défilement ne fonctionne qu'au niveau de la page, et j'ai besoin de la barre de défilement pour seulement figurer sur le conteneur dans lequel le défilement se déroule

  • Il semble que vous avez associé le Bootstrap 3 pré-version de la documentation. Tous les détails que nous fournissons pour BS3 sont susceptibles de changer, car il est pré-version. La scrollspy style dans la documentation, je pense que beaucoup de c'est juste de la valeur liquidative des groupes de style.
  • Si vous allez à la générosité de cette question, au moins s'assurer que le lien est valide...
  • Pour être juste la page est juste d'être mis à jour.
  • que voulez-vous obtenir exactement? Dans l'exemple, il est seulement le comportement de base de scrollspy. Vous souhaitez réaliser cela?
  • Qu'entendez-vous par "comportement de base"?
  • Je viens de voir, ça ressemble à scrollspy a été pris hors de bootstrap 3, est-ce correct?
  • Diverses choses comme des typeahead sont partis, mais scrollspy est toujours là.
  • Oui, vous avez raison, mon erreur de penser qu'il a été supprimé
  • re votre commentaire que de défilement-espion fonctionne uniquement au niveau de la page'. Jeu de données-spy="scroll" sur l'élément que vous souhaitez espionner, il n'a pas à être le corps. Vous pouvez voir ce qui se passe sur le Bootstrap 3 site maintenant dans le défilement-spy exemple sur getbootstrap.com/javascript/#scrollspy
  • L'exemple ne fonctionne pas à partir de getbootstrap.com/javascript/#scrollspy. Cliquez sur les différents éléments dans le menu et vous verrez qu'il n'a pas de défilement de la div, il fait défiler la page principale (j'ai essayé ceci dans google Chrome)

InformationsquelleAutor Zubair | 2013-07-20
  1. 41

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

    1. Dans la balise body ajouter <body data-spy="scroll" data-target="#side-nav">

      ( voir tripoter options de la colonne de gauche)

    2. L'enveloppe de votre côté de la barre de navigation dans un div avec cette même data-ID cible: <div id="side-nav" >

    3. Vous voudrez probablement ajouter la classe apposer de votre côté nav de sorte qu'il reste en place: <ul class="nav nav-pills affix">

    4. Ajouter un ID unique à chacun des maillons de votre navigation: par exemple <li><a href="#one">One</a></li>

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

    Que c'est!

    MODIFIER

    Comment puis-je obtenir pour un style comme le Bootstrap exemple sur leur site si?

    Voici une variante si vous voulez stying similaire à l'amorçage de la page

    http://jsfiddle.net/panchroma/ExWDq/

    Vous verrez que j'ai changé les classes sur la valeur liquidative de la liste ul à faire un meilleur usage de certaines construit en Bootstap style, j'ai ajouté des chevrons pour le menu de liens, et ajout de style et les demandes des médias pour la nav liste.

    • J'ai regardé le JSFiddle. Comment puis-je obtenir pour un style comme le Bootstrap exemple sur leur site si?
    • il y a plusieurs défilement espion exemples @ twitter.github.io/bootstrap/2.3.2/javascript.html#scrollspy , pourriez vous être plus précis?
    • OP dit j'ai vu la main gauche ScrollSpy exemple sur le bootstrap de la page que j'interprète comme la main gauche ScrollSpy ... sur le bootstrap de la page. c'est à dire la scrollspy de mise en œuvre de la documentation.
    • Je voulais dire le scrollspy sur le côté gauche de la page, à travers lequel vous pouvez naviguer à travers tous les exemples
    • merci pour la clarification. Consultez l'édition ci-dessus que j'ai ajouté hier.
    • Merci, jsfiddle.net/panchroma/ExWDq travaillé. Comment avez-vous lien le côté gauche scrollspy avec la constante cependant, je ne pouvais pas voir tout mécanisme de liaison?
    • >Comment avez-vous lien le côté gauche scrollspy avec le contenu si..? Les étapes 4 et 5 au début de ma réponse.
    • Yep, suis. Des œuvres. Merci
    • Très instructif, par exemple, mais la même structure pauses sous BS3 sur Chrome. Pourtant, le BS3 documentation fonctionne très bien sur le même navigateur. Aucune idée de pourquoi c'est le cas-ou comment faire pour que cet exemple fonctionne sur BS3 sur Chrome?
    • cela fonctionne pour vous? jsfiddle.net/panchroma/bjRMb Il semble bon pour moi sur OSX 10.8, Chrome 29.0.1547.57
    • non, en cliquant sur les éléments de la apposée au menu, divers éléments ont disparu. 🙁
    • les éléments de disparaître de la apposé menu ou le contenu principal? Le comportement est-il différent pour vous en Chrome qu'avec d'autres navigateurs?
    • Dans le bootstrap doc, il n'ajoute pas de données "espion" pour le corps. Mais si pas de joindre à corps, il semble ne pas fonctionner.
    • qu'est-ce que l'URL de la page que vous regardez?
    • voici le lien: getbootstrap.com/javascript/#scrollspy. Pour cet exemple, data-target="#navbar-exemple2", data-widget="scroll"
    • jeu de données-spy="scroll" sur l'élément que vous souhaitez espionner, c'est à dire la div qui active quelque chose à faire défiler. Sur getbootstrap.com/javascript/#scrollspy ceci est un div avec de la graisse et de la mdo texte. Dans mon premier exemple qui nous a été d'espionnage sur l'ensemble de la page. Espérons que cette aide!
    • Je l'ai essayé mais ça ne fonctionne pas. A ce réellement le travail pour vous? J'ai fini de déconner avec le bootstrap classes comme les choses sont codés en dur pour le "corps" de la balise, mais je ne pouvais pas le faire fonctionner
    • Comment ajouter animer dans cette. Comme jQuery scrollTo

    InformationsquelleAutor David Taiaroa
  2. 9

    Tout en faisant un peu de recherche en utilisant sidenav scrollspy j'ai trouvé un bon tuto sur tout coder

    Toutes les sources peuvent être trouvées sur github

    InformationsquelleAutor botheredbybees