Bootstrap scrollspy przesunięte na stałej paska nawigacyjnego nie działa

Question

Stworzyłem i dokładny skrzypce mojego problemu tutaj do testowania: http://jsfiddle.net/aVBUy/7/

Problem jest, gdy klikam na pozycji NavBar Mam skrypt, który przewija się do identyfikator elementu. I używam scrollspy, aby podświetlić elementy nawigacyjne, gdy strona jest we właściwej pozycji. Jednak scrollspy zmienia tylko stan aktywny, gdy trafi w górę przeglądarki/urządzenia. Ponieważ mój pasek nawigacyjny jest poprawiony, potrzebuję przesunięcia zastosowanego do scrollspy w celu wyrównania o 51 pikseli (wysokość suwaka).

Próbowałem wszystkiego i nie mogę go uruchomić. Proszę, sprawdź moje skrzypce i sprawdź, czy uda ci się znaleźć miejsce, w którym idę źle, bardzo mi to pomoże.

Oto mój Minimized kod ...

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; 
}); 

Fiddle

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

Answer 1

Trzeba zastosować przesunięcie do ciała.

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

Również trzeba będzie odjąć przynajmniej jednego z offsetHeight w wierszu poniżej, w przeciwnym razie nie będzie działać podczas przewijania w górę.

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

Answer 2

Jest łatwiejsze sposób to zrobić przy użyciu atrybuty znacznika HTML, który chcesz szpiega dalej.

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

dane offsetu-top i dane offsetu-bottom atrybuty mogą być używane w spójnik z kwotą, którą chcesz offest przez. Dużo łatwiej!

Sprawdź ten link do lepszego wyjaśnienia: https://stackoverflow.com/a/18326668/335567

Answer 3

Mała korekta kod bootstrap 3 (jest litle bug kiedy non wersja zminimalizowane menu jest clikcked/migotanie /)

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

Answer 4

Możesz to również osiągnąć bez javascript (poprzez atrybuty danych), deklarując data-offset="51" oprócz data-target.

Źródło: http://getbootstrap.com/javascript/#scrollspy-usage

Answer 5

Z tylko javascript działa tak proste, jak to:

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

Answer 6

W CSS atrybut body tagu position powinien mieć wartość relative