ブートストラップは動作しない固定ナビゲーションバーの上にオフセットscrollspy

Question

私が作成し、テストのためにここに私の問題の正確なフィドルていますhttp://jsfiddle.net/aVBUy/7/

問題であり、私はナビゲーションバーの項目をクリックしたとき、私はへスクロールするスクリプトを持っています要素id。そして、ページが正しい位置にあるときにscroll要素を強調表示するためにscrollspyを使用しています。しかし、スクロールバーはブラウザ/デバイスの上部に当たったときだけアクティブ状態を変更しています。私のnavbarは固定されているので、scrollpyにオフセットを適用して51px（navbar height）だけオフセットする必要があります。

私はすべてを試しましたが、動作させることができません。私のフィドルをチェックし、私が間違っている場所を見つけることができるかどうかを見て、私をそんなに助けてください。

ここに私の最小限のコードだ...

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から少なくとも1つを減算する必要があります。

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したい量に接続詞で使用することができます。ずっと簡単！

より良い説明のために、このリンクをチェックアウト：ブートストラップ3用https://stackoverflow.com/a/18326668/335567

Answer 3

リトルコードの修正を（litleバグは/メニューの非最小化バージョンが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-targetに加えて、data-offset="51"と宣言することによって、JavaScriptなしで（データ属性を介して）これを達成することもできます。

出典：http://getbootstrap.com/javascript/#scrollspy-usage

Answer 5

それは、このような単純な作品のみJavaScriptを使用して：CSSで

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

Answer 6

、bodyタグのposition属性が値を持っている必要がありrelative