引導scrollspy在一個固定的導航欄偏移不起作用

Question

我已創建並在這裏進行測試我的問題的確切小提琴：http://jsfiddle.net/aVBUy/7/

的問題是，當我點擊導航欄項目，我有一個腳本，滾動到元素ID。當頁面處於正確位置時，我正在使用滾動來突出顯示導航元素。然而，滾動只是在它觸及瀏覽器/設備的頂部時才改變活動狀態。因爲我的導航欄是固定的，所以我需要一個偏移量應用於scrollspy以偏移51px（導航欄高度）。

我試過了一切，但無法啓動它。請檢查我的小提琴，看看你能否找到我要出錯的地方，會對我有所幫助。

這裏是我最小化的代碼...

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

您需要應用的偏移量體。

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

此外，您還需要減去以下行的offsetHeight至少一個，否則向上滾動時，將無法正常工作。

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

Answer 2

有任何更簡單的方式來做到這一點使用，你希望在間諜的HTML標籤的屬性。

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

的數據偏移頂和數據偏移底屬性可以在連詞使用帶有你想通過向offest的量。更容易！

看看這個鏈接，一個更好的解釋：https://stackoverflow.com/a/18326668/335567

Answer 3

自舉3小碼校正（有痘痘的錯誤時，菜單的非最小化版本clikcked /一些閃爍/）

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

您還可以通過聲明data-offset="51"以及data-target來實現此目的，而不使用javascript（通過數據屬性）。

來源：http://getbootstrap.com/javascript/#scrollspy-usage

Answer 5

由於只有JavaScript它的工作原理如此簡單：

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

Answer 6

在CSS，body標籤的position屬性應該有值relative