Bootstrap中的Scrollspy无法正常工作

时间:2012-12-20 11:08:56

标签: twitter-bootstrap

简单的问题,有人帮忙吗?对此感到困惑。

有问题的导航栏在页面加载时隐藏,并在表单提交后显示所有内容。

以下是导航栏代码:

<div class="navbar" id="mainnav">
<navbar inner code><ul><li's></li's></ul></navbarcode></div>

<div id="contentwrap" class="row" data-spy="scroll" data-target="#mainnav">
Content with all the anchors
</div>

它没有附加到屏幕上,因为我滚动或任何东西都没有监视内容。

不太确定。我正在使用bootstrap所以包含所有相关文件。我已经逐字复制了多个例子,无法让它发挥作用。

这是一个包含完整代码的jsfiddle:http://jsfiddle.net/ccRnM/7/

注意:此导航栏不在页面顶部,有一个图像设置在页面上方,我希望能够将其滚动到页面内容中,然后让导航栏保持不变,就像它们一样在他们的自助网站示例中。

想法?

1 个答案:

答案 0 :(得分:3)

这是一种做到这一点的方法。 http://jsfiddle.net/panchroma/8jPNm/

我使用

而不是通过javascript使用scrollspy
<div class="navbar" id="mainnav" data-spy="affix" data-offset-top="85">

85是屏幕在导航栏贴上之前需要滚动的距离,所以要玩这个。

我还添加了一些CSS来固定导航栏,并将bootstrap.min.js添加到页面资源中。

祝你好运!

相关问题