0
点赞
收藏
分享

微信扫一扫

Bootstrap ScrollSpy 用法


用法

 

Twitter Bootstrap 的 ScrollSpy 插件有两种用法:

 

 

  1. 通过 data 属性
    根据情况,给需要监视的页面元素添加 data-spy="scroll" – 一般是 body 元素,并且通过 data-target

<body data-spy="scroll" data-target=".navbar">...</body>

  1. 通过 Javascript 语句

$('#navbar').scrollspy()

 

举一个例子,如下:

 

监控的导航部分 HTML 代码:

<div class="bs-docs-sidebar">
    <ul class="nav">
        <li><a href="#one">hello Bootstrp 3</a></li>
        <li><a href="#two">hello jQuery</a></li>
        <li><a href="#three">hello ScrollSpy</a></li>
    </ul>
</div>

 

 

导航相对应的内容部分代码:

 

<div>
    <h2 id="one">This is one.</h2>
    <p>......</p>
    <h2 id="two">This is two.</h2>
    <p>......</p>
    <h2 id="three">This is three.</h2>
    <p>......</p>
</div>

 

 

上述代码里,我们点击导航部分的锚链接可以直接跳转到相应的内容部分,这是这最基本的 HTML 结构。

 

最重要的,导航代码中 ul 含有一个 CSS 类 .nav,它是必需的,没有的话就会导致插件无效果。

 

应用第一个方法,在 body 元素添加相关属性:

 

<body data-spy="scroll" data-target=".bs-docs-sidebar">

 

 

data-target 属性指向的是 class 为 bs-docs-sidebardiv

 

 

第二种办法,使用 JavaScript:


$(function(){
    $('.bs-docs-sidebar').scrollspy();
})




 

Bootstrap 文档推荐第一种方法,因为不用任何的 JavaScript 语句即可实现 ScrollSpy 效果。

 

附:jsfiddle 示例

 

调试

 

如果你的 ScrollSpy 不起作用,则有一个简单的调试办法,利用 fireQuery:

 

 

 

上图是安装 fireQuery 后打开 firebug 面板 HTML 标签页里的截图,因为 fireQuery 会将 jQuery 事件等附加在 HTML 代码中,所以我们可以清楚地看到如下一条规则,

 

selector=".bs-docs-sidebar .nav li > a"

 

 

如果你的导航部分 HTML 结构与它不一样,则说明 jQuery 找不到它要的元素,也就没法生成效果,解决办法是调整代码结构。

 

 

默认的 bootstrap.css, 不是必须要加载的,只要给 .active 添加自定义的css style就可以!

 

 

举报

相关推荐

0 条评论