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

J'ai créé et exacte de violon de mon problème ici pour le test: http://jsfiddle.net/aVBUy/7/

La question est, quand je clique sur la barre de navigation des articles, j'ai un script qui permet d'accéder à l'id de l'élément. Et je suis en utilisant scrollspy pour mettre en surbrillance la valeur liquidative des éléments quand la page est dans la bonne position. Cependant, le scrollspy est seulement la modification de l'état actif quand il frappe la partie supérieure du navigateur/de l'appareil. Parce que ma barre de navigation est fixe, j'ai besoin d'un décalage appliqué à scrollspy à compenser par 51px (barre de navigation de hauteur).

J'ai tout essayé et je ne peux pas le faire fonctionner. Veuillez vérifier mon violon et de voir si vous pouvez trouver l'endroit où je vais mal, m'aiderait beaucoup.

Voici mon minimisé code...

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/

source d'informationauteur Joshc

  1. 22

    Vous avez besoin d'appliquer le décalage pour le corps.

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

    Aussi, vous aurez besoin de soustraire au moins l'une de la offsetHeight dans la ligne en dessous, sinon il ne fonctionnera pas lorsque le défilement.

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

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

    Source: http://getbootstrap.com/javascript/#scrollspy-usage

  3. 3

    Avec javascript, il fonctionne aussi simple que cela:

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

    Il n'y a de toute façon plus facile de faire cela en utilisant les attributs de la balise HTML que vous souhaitez espion.

    <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>

    La données du décalage du top et de données-offset-bas attributs peuvent être utilisés dans conjuntion avec le montant que vous souhaitez offest par. Beaucoup plus facile!

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

  5. 1

    Peu de code de correction pour bootstrap 3 (il y a un petit bug lors de la non version réduite de menu est clikcked /scintillement/)

    $('.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;});
  6. 0

    Dans le CSS , body de la balise position attribut doit avoir la valeur de relative