如何实现网页滚动侦测以及顶端固定导航栏？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 4054 天前的主题，其中的信息可能已经有所发展或是发生改变。

本人不太了解javascript, 但是准备设计一个看着顺眼的网页, 有顶部固定的导航栏和右边目录栏, 其中目录栏实现scrollspy(滚动侦测 http://twitter.github.com/bootstrap/javascript.html#scrollspy ). 在参考了一些网页源码之后设计了一个简单的测试网页, 源码放在jsfiddle上, 示例代码在 http://jsfiddle.net/jFw4G/light/

有以下几个问题:
1.单击右边目录跳转时, 标题所在行被导航栏遮住, 看上去很不美观.
2.滚动侦测时, 不能侦测到二级目录. 好像是还需要一个js脚本.
3.我把html, css, js代码放在本地测试了一下, 但是一级目录也没有滚动侦测效果了.

其中head标签内容为
<head>
<link rel="Stylesheet" type="text/css" href="../style.css">
<title>shell脚本</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-scrollspy.js" type="text/javascript"></script>
<script src="../js/jquery-1.7.1.min.js" type="text/javascript"></script>
</head>

侦测

2 条回复 • 1970-01-01 08:00:00 +08:00

rudder

2013-06-07 15:12:59 +08:00

js顺序是不是放错了?
<script src="../js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-scrollspy.js" type="text/javascript"></script>

看这里
http://xiemin.me/bootstrap-2.3.0/javascript.html#scrollspy

xuelang

2013-06-07 16:36:57 +08:00

@rudder 嗯嗯，确实是的，之前segmentfault 上http://segmentfault.com/q/1010000000178043 有人已经指出来了。不过还是感谢你哈！！！