Bootstrap 3 - Scrollspy avec barre latérale

Je suis en utilisant Bootstrap 3. Je veux recréer les mêmes fonctionnalités que la barre latérale dans la la documentation sur le site de Bootstrap.

Ci-dessous mon code, et c'est également ici: http://bootply.com/82119

Deux problèmes.

  1. La barre latérale articles ne sont pas en surbrillance lorsque vous faites défiler vers le bas de la dernière page de chaque section.
  2. Lorsque vous cliquez sur une barre latérale de l'élément, il saute pertinentes de l'ancre, mais la moitié du contenu n'est pas visible. La modification de la data-offset valeur semble avoir aucun effet.

Ce que je fais mal?

<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="list-group navbar" id="sidebar">
                <ul class="nav" id="mynav">
                    <li><a href="#c1" class="list-group-item">
                          Content 1
                        </a>
                    </li>
                    <li> <a href="#c2" class="list-group-item" contenteditable="false">Content 2
                        </a>
                    </li>
                    <li> <a href="#c3" class="list-group-item" contenteditable="false">Content 3
                        </a>
                    </li>
                    <li> <a href="#c4" class="list-group-item" contenteditable="false">Content 4
                        </a>
                    </li>
                    <li> <a href="#c5" class="list-group-item" contenteditable="false">Content 5
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="col-md-9" id="mycontent" data-spy="scroll" data-target="#sidebar" data-offset="0">
                <h2 id="c1" class="">Content 1</h2>
At Bootply we attempt to build simple Bootstrap templates that utilize...
            <hr class="col-md-12">
                    <h2 id="c2" class="">Content 2</h2>
Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto...
                <hr class="col-md-12">
                    <h2 id="c3" class="">Content 3</h2>
Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto...
                <hr class="col-md-12">
                    <h2 id="c4" class="">Content 4</h2>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium...
                    <h2 id="c5" class="">Content 5</h2>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium...
        </div>
    </div>
</div>

source d'informationauteur mccannf

  1. 13

    Votre question ne semble pas être en double, après tout.
    Vous pouvez essayer quelque chose comme ceci: http://bootply.com/82265

    Lorsque vous cliquez sur un lien dans votre subnav le contenu sera de se cacher derrière la barre de navigation. J'ai enveloppé vos éléments de contenu dans un supplément de div. En faisant cela, je pourrais ajouter un padding-top. Le rembourrage rend le h2 visible:

    var clicked = false;
$('#mynav li a').click(
function(){
    $('#mycontent > div > h2').css('padding-top',0);
    $($( this ).attr('href') + ' > h2').css('padding-top','50px');
    clicked = true;
    }
);  

$('body').on('activate.bs.scrollspy', function () {
   if(!clicked)$('#mycontent > div > h2').css('padding-top',0);
  clicked = false;
})

    Problème que j'ai trouvé était un moyen de défaire le padding-top. Je ne pouvais pas utiliser un événement scroll cause l'affixe déclenche un événement scroll après le rembourrage a été ajouter. Annuler sur 'activer.bs.scrollspy' semble fonctionner.

    Dans le bootply-je ajouter de la scrollspy par $('body').scrollspy({ target: '#sidebar', offset:80 }); vous pouvez utiliser <body data-spy="scroll" data-target="#sidebar"> aussi. je ne suis pas sûr de ce que sera la bonne valeur pour le scrollspy décalage. 70 semble une sorte de travail.

    Remarque j'ai aussi un min-height pour votre dernier élément de contenu, autrement, vous ne pouvez pas faire défiler les 2 derniers articles.

    Je pense que la ci-dessus sera plus une sorte de preuve de concept puis une vraie réponse.

    NOTE de Bootstrap, documentation auront le même problème. Ils ont résolu ce problème en ajoutant un espace supplémentaire entre les thèmes par défaut, voir:

    Bootstrap 3 - Scrollspy avec barre latérale

    Un espace supplémentaire sera ajouter dans les docs.css:

    h1[id] {
    margin-top: -45px;
    padding-top: 80px;
}

    Voir aussi: https://github.com/twbs/bootstrap/issues/10670

  2. 1

    Je suis tombé sur ce même problème et fini par le résoudre par la capture de l'cliquer sur le lien de navigation, la prévention de la navigateur de la gestion du clic, et manuellement le défilement de l'élément cible à une position ajustée pour la mise en page. Voici le code:

            //figure out a nice offset from the top of the page
        var scrollTopOffset = $('#main-nav-banner').outerHeight() + 50;
        //catch clicks on sidebar navigation links and handle them
        $('.bs-sidebar li a').on('click', function(evt){
            //stop the default browser behaviour for the click 
            //on the sidebar navigation link
            evt.preventDefault();
            //get a handle on the target element of the clicked link
            var $target = $($(this).attr('href'));
            //manually scroll the window vertically to the correct
            //offset to nicely display the target element at the top
            $(window).scrollTop($target.offset().top-(scrollTopOffset));
        });

    La scrollTopOffset variable détermine comment fermer vers le haut de l'élément de défile - vous aurez probablement besoin d'ajuster le calcul de la valeur en fonction de votre mise en page. Dans l'exemple ci-dessus, j'ai utilisé la hauteur de la barre de navigation principale bannière à travers le haut de la page, et ajouté 50 pixels parce que "l'air bien".

    En dehors de l'ajout de l'extra extrait ci-dessus, il n'y a pas besoin de modifier votre code HTML ou changer la façon dont vous êtes à l'initialisation de la scrollspy fonctionnalité.

    Pour moi, ça fonctionne très soigneusement sous Bootstrap v3.0.0 - j'espère que c'est de l'utiliser pour les autres!