Comment utiliser Apposer composant dans Twitter Bootstrap 2.1.1

Je suis en train d'utiliser apposer composant dans la dernière version de twitter bootstrap par la suite des mesures documentées et je ne peux pas le faire fonctionner. Voici l'exemple en JsFiddle

Je vois deux problèmes

  • Cliquant sidenav liens défile correctement pour le contenu, mais le défilement de contenu n'est pas approprié sidenav lien actif
  • La sidenav n'est pas le style que dans le bootstrap site web.

J'apprécierais si quelqu'un aide à faire ce travail comme dans twitter bootstrap site.

Pour la première question, je pense que vous devez définir manuellement le lien de la classe "active" lorsque l'utilisateur clique dessus.

OriginalL'auteur Raja | 2012-09-17

  1. 6

    Vous êtes à la recherche d'un ScrollSpy. Elle met en évidence un élément de menu que vous faites défiler ou de passer à la section appropriée.

    Apposer est d'une certaine façon alternative expérimentale CSS position:sticky. Ce qu'il fait que les changements de menu position de static à fixed comme vous le faites défiler n px de haut.

    OriginalL'auteur Pavlo

  2. 4

    La documentation sur apposer est source de confusion car il décrit l'apposer en disant: "Le menu sur la gauche est une démo en live de l'affixe plugin." alors que ce menu est même plus un exemple de la scrollspy.

    Je ressemblait le menu comme sur le bootstrap docu dans un petit jsfiddle à

    http://jsfiddle.net/citykid/Gb2SD/6/

    <body>
    <div class="container">
        <div class="row">
            <div class="span2" id="navparent">
                <ul class="nav nav-list navex" data-spy="affix">
                    <li><a href="#o">overview</a>
                    </li>
                    ...
                </ul>
            </div>
            <div class="span9">
                <p>top of the document</p>
                 <h3 id="o" data-offset-top="200">Overview</h3>
                <div style="height:500px">dummy content overview</div>
                ...
            </div>
        </div>
    </div>
    <script src="/js/jquery-1.9.0.js"></script>
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-scrollspy.js"></script>
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-affix.js"></script>
    <script>
        $(document).ready(function() {
            $(document.body).scrollspy({
                target: "#navparent"
            });
        });
    </script>
</body>

    Utiliser l'api JS, pas les attributs de données, sinon vous rencontrez un bug décrit à jsfiddle.net/citykid/Gb2SD/4

    OriginalL'auteur citykid