V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
xuelang
V2EX  ›  问与答

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

  •  
  •   xuelang · 2013-03-13 07:49:16 +08:00 · 4038 次点击
    这是一个创建于 4273 天前的主题,其中的信息可能已经有所发展或是发生改变。
    本人不太了解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
        1
    rudder  
       2013-06-07 15:12:59 +08:00   ❤️ 1
    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
        2
    xuelang  
    OP
       2013-06-07 16:36:57 +08:00
    @rudder 嗯嗯,确实是的,之前segmentfault 上http://segmentfault.com/q/1010000000178043 有人已经指出来了。 不过还是感谢你哈!!!
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2755 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 10:03 · PVG 18:03 · LAX 02:03 · JFK 05:03
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.