Mat*_*ter 2 twitter-bootstrap scrollspy
我正在尝试实现一个固定的侧面菜单,用于更新活动页面与活动类的链接.我将滚动间谍HTML5元素放在正文上,但我遇到了问题.有人可以查看我的页面,看看他们是否可以确定什么是错的？
问题是您已将导航放置在div中,而不是使用导航ID进行滚动.为了使scrollspy工作你可以将"side-nav"分配给span3 div,如:浏览器中的 Jsfiddle demo
<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>
| 归档时间： |
|
| 查看次数： |
14581 次 |
| 最近记录： |