web-dev-qa-db-fra.com

Bootstrap scrollspy offset sur une barre de navigation fixe ne fonctionne pas

J'ai créé et corrige mes problèmes ici pour les tests: http://jsfiddle.net/aVBUy/7/

Le problème est que, lorsque je clique sur les éléments de la barre de navigation, j'ai un script qui fait défiler jusqu'à l'identifiant de l'élément. Et j'utilise scrollspy pour mettre en surbrillance les éléments de navigation lorsque la page est correctement positionnée. Cependant, le scrollspy ne modifie l'état actif que lorsqu'il atteint le haut du navigateur/du périphérique. Étant donné que ma barre de navigation est fixe, il faut appliquer un décalage à scrollspy de 51px (hauteur de barre de navigation).

J'ai tout essayé et je ne peux pas le faire fonctionner. S'il vous plaît vérifier mon violon et voir si vous pouvez trouver le où je me trompe, m'aiderait beaucoup.

Voici mon code minimisé ...

HTML

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <a class="brand" href="#"><img src="img/logo.gif" alt="" /></a>
            <div class="nav-collapse collapse">
                <ul class="nav">
                    <li><a href="#welcome" data-scroll="#welcome">Welcome</a></li>
                    <li><a href="#about" data-scroll="#about">About</a></li>
                    <li><a href="#route" data-scroll="#route">The Route</a></li>
                    <li><a href="#bike" data-scroll="#bike">The Bike</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div id="welcome" class="row-fluid">
        <div class="span12">
            <h3>Welcome</h3>
            ...
        </div>
    </div>
    <hr />
    <div id="about" class="row-fluid">
        <div class="span12">
            <h3>About the ride</h3>
            ...
        </div>
    </div>
    <hr />
    <div id="route" class="row-fluid">
        <div class="span12">
            <h3>The Route</h3>
            ...
        </div>
    </div>
    <hr />
    <div id="bike" class="row-fluid">
        <div class="span12">
            <h3>The Bike</h3>
            ...
        </div>
    </div>
    <hr>
    <footer>
        <p class="muted"><small>© 2013 All rights reserved.</small></p>
    </footer>
</div>

CSS

body {
    padding: 51px 0 0;
}
/* Override Bootstrap Responsive CSS fixed navbar */
 @media (max-width: 979px) {
    .navbar-fixed-top, .navbar-fixed-bottom {
        position: fixed;
        margin-left: 0px;
        margin-right: 0px;
    }
}
body > .container {
    padding: 0 15px;
}

SCRIPT

var offsetHeight = 51;

$('.nav-collapse').scrollspy({
    offset: offsetHeight
});

$('.navbar li a').click(function (event) {
    var scrollPos = $('body > .container').find($(this).attr('href')).offset().top - offsetHeight;
    $('body,html').animate({
        scrollTop: scrollPos
    }, 500, function () {
        $(".btn-navbar").click();
    });
    return false;
});

VIOLON

http://jsfiddle.net/aVBUy/7/

jquerytwitter-bootstrapjsfiddlescrollspy
15
Joshc

Vous devez appliquer le décalage au corps.

$('body').scrollspy({
   offset: offsetHeight
});

En outre, vous devrez soustraire au moins un élément de offsetHeight dans la ligne ci-dessous, sinon cela ne fonctionnera pas lors du défilement vers le haut.

var scrollPos = $('body > .container').find($(this).attr('href')).offset().top - (offsetHeight - 1);
22
Schmalzy

Vous pouvez également y parvenir sans javascript (via les attributs de données), en déclarant data-offset="51" en plus de data-target.

Source: https://getbootstrap.com/docs/3.3/javascript/#scrollspy-usage

9
Zoltán

Avec seulement javascript, cela fonctionne aussi simplement que cela:

$( document ).ready(function() {
    //Scrollspy offset
    $("body").scrollspy({target: "#scroll-nav", offset:200});
});
3
Turbojohan

Pour ce faire, il est plus simple d’utiliser les attributs de la balise HTML sur laquelle vous souhaitez espionner.

<ul class="nav nav-list affix" data-spy="affix" data-offset-top="585" data-offset-  bottom="425" id="prepare-navigation">
  <li class="nav-header">Where?</li>
  <li class="divider"></li>
  <li><a href="#at-the-museum-day-time">When?</a></li>
  <li class="divider"></li>
  <li><a href="#at-the-museum-overnight">Why?</a></li>
</ul>

Les attributs data-offset-top et data-offset-bottom peuvent être utilisés conjointement avec le montant que vous souhaitez utiliser. Beaucoup plus facile!

Consultez ce lien pour une meilleure explication: https://stackoverflow.com/a/18326668/335567

2
Deano

Petite correction de code pour bootstrap 3 (il y a un petit bug lorsque l'on clique sur la version non réduite du menu/des scintillements /)

$('.navbar li a').click(function (event) {
var scrollPos = $('body > .container').find($(this).attr('href')).offset().top - (offsetHeight - 1);
$('body,html').animate({
    scrollTop: scrollPos
}, 500, function () {
    if ($("div.navbar-collapse").hasClass("in")) {
        $(".navbar-toggle").click();
    } else {

    }
});
return false;});
1
AKIRA

Dans la CSS, l'attribut body de la balise position devrait avoir la valeur relative

0
Zahid Hossain