Question

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

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

Answer 1

问题在于您已将导航放入div中，而不是使用导航ID进行滚动。为了使scrollspy工作你可以将“side-nav”分配给span3 div，如： Jsfiddle demo in browser

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

Bootstrap Scrollspy无效

1 个答案: