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