2

我正在尝试实现一个固定的侧面菜单，用活动类更新活动页面链接。我将滚动间谍 HTML5 元素放在正文上，但我遇到了问题。有人可以查看我的页面，看看他们是否可以确定问题所在吗？

http://mattaltepeter.com/new/about.shtml

4

1 回答 1

8

问题是您已将导航放置在 div 中，而不是使用导航 id 滚动。为了使 scrollspy 工作您可以将“side-nav”分配给 span3 div，例如：浏览器中的 Jsfiddle 演示

<div class="row">
<div class="span3" id="side-nav">
    <ul class="nav nav-list about-list hidden-phone hidden-tablet affix" >
        <li class="active"><a href="#about"><i class="icon-chevron-right"></i> About Me</a></li>
        <li><a href="#education"><i class="icon-chevron-right"></i> Education</a></li>
        <li><a href="#work"><i class="icon-chevron-right"></i> Work Experience</a></li>
        <li ><a href="#sports"><i class="icon-chevron-right"></i> Sports</a></li>
    </ul>
</div>

您可以通过以下方式创建您的 para 部分：

<div class="page-header" id="about">
        <h1 >About Me</h1>

    <p>My name is Matt Altepeter. I am 21 years old .</p>
    </div>

请删除脚本以初始化滚动，因为您已经将它们添加到正文

<body data-offset="50" data-target="#side-nav" data-spy="scroll">

在 jquery 之后和任何其他脚本之前声明 bootstrap.js 是一种很好的做法。将所有脚本放在页脚中，有助于节省加载时间。

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
于 2013-03-08T11:17:32.787 回答