Comment puis-je définir le décalage pour ScrollSpy dans Bootstrap ?

Question

J'ai un site avec la barre de navigation fixée en haut et 3 divs en dessous dans la zone de contenu principale.

Je tente d'utiliser scrollspy du framework Bootstrap.

J'ai réussi à mettre en surbrillance les différentes rubriques dans le menu lorsque vous faites défiler les divs.

J'ai également réussi à faire en sorte que lorsque vous cliquez sur le menu, cela fera défiler vers la bonne partie de la page. Cependant, le décalage est incorrect (cela ne prend pas en compte la barre de navigation, donc je dois décaler d'environ 40 pixels)

Je vois sur la page Bootstrap qu'il mentionne une option de décalage mais je ne sais pas comment l'utiliser.

Je ne sais pas non plus ce que cela signifie lorsque cela dit que vous pouvez utiliser scrollspy avec $('#navbar').scrollspy(), je ne sais pas où l'inclure alors je ne l'ai pas fait et tout semble fonctionner (sauf le décalage).

Je pensais que le décalage pourrait être le data-offset='10' sur la balise body, mais cela ne change rien pour moi.

J'ai l'impression que c'est quelque chose de très évident et que je le rate tout simplement. Des conseils ?

Mon code est

...

    VIPS

             Traffic

        Temps de réponse

        CPU

...

Answer 1

Bootstrap utilise un décalage pour résoudre uniquement l'espionnage, pas le défilement. Cela signifie que faire défiler jusqu'au bon endroit dépend de vous.

Essayez ceci, ça fonctionne pour moi : ajoutez un gestionnaire d'événements pour les clics de navigation.

var offset = 80;

$('.navbar li a').click(function(event) {
    event.preventDefault();
    $($(this).attr('href'))[0].scrollIntoView();
    scrollBy(0, -offset);
});

Je l'ai trouvé ici : https://github.com/twitter/bootstrap/issues/3316

Answer 2

Le tour de magie, comme Tim l'a laissé entendre, consiste à tirer parti du padding. Donc, le problème est que votre navigateur veut toujours faire défiler votre ancre jusqu'au sommet exact de la fenêtre. Si vous positionnez votre ancre là où votre texte commence réellement, il sera occulté par votre barre de menu. Au lieu de cela, ce que vous devez faire, c'est positionner votre ancre sur l'ID du conteneur

ou

, que la navigation/navbar utilisera automatiquement. Ensuite, vous devez définir votre padding-top pour le conteneur à la quantité de décalage souhaitée, et le margin-top pour le conteneur à l'opposé du padding-top. Maintenant, le bloc de votre conteneur et l'ancre commencent exactement au sommet de la page, mais le contenu à l'intérieur ne commence que sous la barre de menu.

Si vous utilisez des ancres régulières, vous pouvez accomplir la même chose en utilisant un margé-top négatif dans votre conteneur comme ci-dessus, mais sans padding. Ensuite, vous placez une ancre régulière en tant que premier enfant du conteneur. Ensuite, vous stylez le deuxième élément enfant avec un margin-top opposé mais égal, en utilisant le sélecteur .container:first-child +.

Tout cela présume que la marge de votre balise est déjà définie pour commencer sous votre en-tête, ce qui est la norme (sinon la page s'afficherait avec du texte occulté dès le démarrage).

Voici un exemple de ceci en action. Tout ce qui a un id sur votre page peut être lié en ajoutant # l'id-des-éléments à la fin de votre URL. Si vous rendez tous vos balises h et balises dt avec des ids link-able (Comme github le fait) avec une sorte de script qui injecte un petit lien à gauche d'eux; en ajoutant ce qui suit à votre CSS, cela prendra en charge le décalage de la barre de navigation pour vous :

body {
    margin-top: 40px;/* faire de la place pour la barre de navigation */
}

/* faire de la place pour la barre de navigation */
h1[id],
h2[id],
h3[id],
h4[id],
h5[id],
h6[id],
dt[id]{
    padding-top: 60px;
    margin-top: -40px;
}

Answer 3

Vous pouvez changer l'offset de la scrollspy en cours d'exécution avec ceci (en supposant que vous espionnez le corps) :

offsetValue = 40;
$('body').data().scrollspy.options.offset = offsetValue;
// forcer la scrollspy à recalculer les décalages de vos cibles
$('body').data().scrollspy.process();

Cela fonctionne également si vous avez besoin de changer la valeur de l'offset dynamiquement. (J'aime que la scrollspy bascule lorsqu'un élément de la section suivante est à environ à mi-hauteur de la fenêtre, donc j'ai besoin de changer l'offset pendant le redimensionnement de la fenêtre.)

Answer 4

Si vous voulez un décalage de 10, vous mettriez ceci dans votre en-tête :

  $('#navbar').scrollspy({
    offset: 10
  });

Votre balise body ressemblerait à ceci :

Answer 5

Je pense que l'offset pourrait avoir un lien avec la position inférieure de la section.

J'ai corrigé mon problème - le même que le vôtre - en ajoutant

  padding-top: 60px;

dans la déclaration de la section dans bootstrap.css

J'espère que cela vous aidera !