← Bootstrap 下拉菜单插件 ( Dropdown ) Bootstrap 标签页插件 ( Tab ) →

Bootstrap 滚动监听插件 ( Scrollspy )

Bootstrap 3 内置了滚动监听插件( Scrollspy ) 用于根据滚动条的位置自动更新对应的导航目标

滚动监听插件 ( Scrollspy ),也叫自动更新导航插件，基本的实现是随着页面的滚动，基于滚动条的位置向导航栏添加 .active class

Bootstrap 滚动监听插件 ( Scrollspy )

如果我们想要向顶部导航添加滚动监听行为，可以有以下两种方法

  1. 通过 data 属性

    向想要监听的元素( 通常是 body ) 添加 data-spy="scroll"

    然后添加带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 data-target

    为了它能正常工作，您必须确保页面主体中有匹配您所要监听链接的 ID 的元素存在

    <body data-spy="scroll" data-target=".navbar-example">
...
<div class="navbar-example">
    <ul class="nav nav-tabs">
        ...
    </ul>
</div>
...
</body>

  2. 通过 JavaScript

    我们可以通过 JavaScript 调用滚动监听，选取要监听的元素，然后调用 .scrollspy() 函数

    $('body').scrollspy({ target: '.navbar-example' })

范例 1

下面的范例演示了通过 data 属性使用滚动监听( Scrollspy ) 插件

<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
    <div class="container-fluid"> 
    <div class="navbar-header">
        <button class="navbar-toggle" type="button" data-toggle="collapse"
                data-target=".bs-js-navbar-scrollspy">
            <span class="sr-only">切换导航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">日期</a>
    </div>
    <div class="collapse navbar-collapse bs-js-navbar-scrollspy">
        <ul class="nav navbar-nav">
            <li><a href="#ios">2017-11-1</a></li>
            <li><a href="#svn">2017-11-2</a></li>
            <li class="dropdown">
                <a href="#" id="navbarDrop1" class="dropdown-toggle"
                   data-toggle="dropdown">10 月
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu" role="menu"
                    aria-labelledby="navbarDrop1">
                    <li><a href="#jmeter" tabindex="-1">2017-10-1</a></li>
                    <li><a href="#ejb" tabindex="-1">2017-10-2</a></li>
                    <li class="divider"></li>
                    <li><a href="#spring" tabindex="-1">2017-10-3</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div> 
</nav>
<div data-spy="scroll" data-target="#navbar-example" data-offset="0"
     style="height:200px;overflow:auto; position: relative;">
    <h4 id="ios">2017-11-1</h4>
    <p>任何一个行业，都有它的难处，但也有它的乐趣。可能乐趣很少很少，但就是这么一点点的乐趣，让我们苦中作乐，一直坚持了下来
    </p>
    <h4 id="svn">2017-11-2</h4>
    <p>有些人注定会成为一个创业者，因为他们的心里早已经播下一颗种子。在他们的一生中，总有一天，会碰到这样那样的契机，然后这颗种子就会破土而出，恣意生长，不可遏制……
    </p>
    <h4 id="jmeter">2017-10-1</h4>
    <p>一个人最好的状态，应该是毫无恐惧，万事不纠结，放手去干。总是怀念小时候，不知道天高地厚，只知道往前冲，元气满满，爱憎分明。长大了，在不知道哪天的某一个瞬间，突然发现自己开始思前想后，顾虑太多，再不快活，行为瘫痪，想说而不敢说，想做而不敢做
    </p>
    <h4 id="ejb">2017-10-2</h4>
    <p>CEO 特拉维斯·卡拉尼克几乎在尽自己所能在迎合或者说开拓这个市场：2015 年，他总共在中国待了 75 天，算上往返中美的飞行时间，这几乎能够占到工作时间的一半，他的朋友甚至开玩笑说他应该“申请加入中国国籍”；尽量与中国政府和媒体搞好关系，甚至会去参加在边远西南省份贵州举办的数博会；接受有中国背景投资机构和百度的投资；聘请中国背景深厚的柳甄作为中国的负责人
    </p>
    <h4 id="spring">2017-10-3</h4>
    <p>Uber 在中国采取的精英小分队模式通过花样频出的营销活动将优品牌和知名度打响，但发展中后期由于没有把握好市场节奏导致发展节奏过慢、客服等用户体验饱受诟病、内部管理问题集中爆发、政策关系不佳等问题，再加上遭遇到滴滴的全力狙击，这家美国公司最终以合并在中国收场
    </p>
</div>

运行范例 »

运行以上范例，输出结果如下

滚动监听( Scrollspy ) 插件

选项

下表列出了滚动监听插件可用的选项，这些选项可以通过 data 属性或 JavaScript 来传递

选项 类型/默认值 属性 描述
offset number
默认值：10		 data-offset 当计算滚动位置时，距离顶部的偏移像素

方法

滚动监听插件 ( Scrollspy ) 只有一个方法

.scrollspy('refresh')

当通过 JavaScript 调用 scrollspy 方法时，需要调用 .refresh 方法来更新 DOM

这在 DOM 的任意元素发生变更( 即，您添加或移除了某些元素 ) 时非常有用

下面是使用该方法的语法

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

范例

下面的范例演示了 .scrollspy('refresh') 方法的使用

<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
    <div class="container-fluid"> 
    <div class="navbar-header">
        <button class="navbar-toggle" type="button" data-toggle="collapse"
                data-target=".bs-js-navbar-scrollspy">
            <span class="sr-only">切换导航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">日期</a>
    </div>
    <div class="collapse navbar-collapse bs-js-navbar-scrollspy">
        <ul class="nav navbar-nav">
            <li><a href="#ios">2017-11-1</a></li>
            <li><a href="#svn">2017-11-2</a></li>
            <li class="dropdown">
                <a href="#" id="navbarDrop1" class="dropdown-toggle"
                   data-toggle="dropdown">10月
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu" role="menu"
                    aria-labelledby="navbarDrop1">
                    <li><a href="#jmeter" tabindex="-1">2017-10-1</a></li>
                    <li><a href="#ejb" tabindex="-1">2017-10-2</a></li>
                    <li class="divider"></li>
                    <li><a href="#spring" tabindex="-1">2017-10-3</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div> 
</nav>
<div data-spy="scroll" data-target="#navbar-example" data-offset="0"
     style="height:200px;overflow:auto; position: relative;">
    <h4 id="ios">2017-11-1</h4>
    <p>任何一个行业，都有它的难处，但也有它的乐趣。可能乐趣很少很少，但就是这么一点点的乐趣，让我们苦中作乐，一直坚持了下来
    </p>
    <h4 id="svn">2017-11-2<small><a href="#" onclick="removeSection(this);">
    &times; 删除该部分</a></small></h4>
    <p>有些人注定会成为一个创业者，因为他们的心里早已经播下一颗种子。在他们的一生中，总有一天，会碰到这样那样的契机，然后这颗种子就会破土而出，恣意生长，不可遏制……
    </p>
    <h4 id="jmeter">2017-10-1</h4>
    <p>一个人最好的状态，应该是毫无恐惧，万事不纠结，放手去干。总是怀念小时候，不知道天高地厚，只知道往前冲，元气满满，爱憎分明。长大了，在不知道哪天的某一个瞬间，突然发现自己开始思前想后，顾虑太多，再不快活，行为瘫痪，想说而不敢说，想做而不敢做
    </p>
    <h4 id="ejb">2017-10-2</h4>
    <p>CEO 特拉维斯·卡拉尼克几乎在尽自己所能在迎合或者说开拓这个市场：2015 年，他总共在中国待了 75 天，算上往返中美的飞行时间，这几乎能够占到工作时间的一半，他的朋友甚至开玩笑说他应该“申请加入中国国籍”；尽量与中国政府和媒体搞好关系，甚至会去参加在边远西南省份贵州举办的数博会；接受有中国背景投资机构和百度的投资；聘请中国背景深厚的柳甄作为中国的负责人
    </p>
    <h4 id="spring">2017-10-3</h4>
    <p>Uber 在中国采取的精英小分队模式通过花样频出的营销活动将优品牌和知名度打响，但发展中后期由于没有把握好市场节奏导致发展节奏过慢、客服等用户体验饱受诟病、内部管理问题集中爆发、政策关系不佳等问题，再加上遭遇到滴滴的全力狙击，这家美国公司最终以合并在中国收场
    </p>
</div>
<script>
    $(function(){
        removeSection = function(e) {
            $(e).parents(".section").remove();
            $('[data-spy="scroll"]').each(function () {
                var $spy = $(this).scrollspy('refresh')
            });
        }
        $("#navbar-example").scrollspy();
    });
</script>

运行范例 »

运行以上范例，输出结果如下

滚动监听( Scrollspy ) 插件方法

事件

下表列出了滚动监听插件监听的事件

事件 描述
activate.bs.scrollspy 每当一个新项目被滚动监听激活时，触发该事件

$('#myScrollspy').on('activate.bs.scrollspy', function () {
// 执行一些动作...
})

下面的范例演示了 activate.bs.scrollspy 事件的用法

<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
    <div class="container-fluid"> 
    <div class="navbar-header">
        <button class="navbar-toggle" type="button" data-toggle="collapse"
                data-target=".bs-js-navbar-scrollspy">
            <span class="sr-only">切换导航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">日期</a>
    </div>
    <div class="collapse navbar-collapse bs-js-navbar-scrollspy">
        <ul class="nav navbar-nav">
            <li><a href="#ios">2017-11-1</a></li>
            <li><a href="#svn">2017-11-2</a></li>
            <li class="dropdown">
                <a href="#" id="navbarDrop1" class="dropdown-toggle"
                   data-toggle="dropdown">Java
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu" role="menu"
                    aria-labelledby="navbarDrop1">
                    <li><a href="#jmeter" tabindex="-1">2017-10-1</a></li>
                    <li><a href="#ejb" tabindex="-1">2017-10-2</a></li>
                    <li class="divider"></li>
                    <li><a href="#spring" tabindex="-1">2017-10-3</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div> 
</nav>
<div data-spy="scroll" data-target="#navbar-example" data-offset="0"
     style="height:200px;overflow:auto; position: relative;">
    <h4 id="ios">2017-11-1</h4>
    <p>任何一个行业，都有它的难处，但也有它的乐趣。可能乐趣很少很少，但就是这么一点点的乐趣，让我们苦中作乐，一直坚持了下来
    </p>
    <h4 id="svn">2017-11-2</h4>
    <p>有些人注定会成为一个创业者，因为他们的心里早已经播下一颗种子。在他们的一生中，总有一天，会碰到这样那样的契机，然后这颗种子就会破土而出，恣意生长，不可遏制……
    </p>
    <h4 id="jmeter">2017-10-1</h4>
    <p>一个人最好的状态，应该是毫无恐惧，万事不纠结，放手去干。总是怀念小时候，不知道天高地厚，只知道往前冲，元气满满，爱憎分明。长大了，在不知道哪天的某一个瞬间，突然发现自己开始思前想后，顾虑太多，再不快活，行为瘫痪，想说而不敢说，想做而不敢做
    </p>
    <h4 id="ejb">2017-10-2</h4>
    <p>CEO 特拉维斯·卡拉尼克几乎在尽自己所能在迎合或者说开拓这个市场：2015 年，他总共在中国待了 75 天，算上往返中美的飞行时间，这几乎能够占到工作时间的一半，他的朋友甚至开玩笑说他应该“申请加入中国国籍”；尽量与中国政府和媒体搞好关系，甚至会去参加在边远西南省份贵州举办的数博会；接受有中国背景投资机构和百度的投资；聘请中国背景深厚的柳甄作为中国的负责人
    </p>
    <h4 id="spring">2017-10-3</h4>
    <p>Uber 在中国采取的精英小分队模式通过花样频出的营销活动将优品牌和知名度打响，但发展中后期由于没有把握好市场节奏导致发展节奏过慢、客服等用户体验饱受诟病、内部管理问题集中爆发、政策关系不佳等问题，再加上遭遇到滴滴的全力狙击，这家美国公司最终以合并在中国收场
    </p>
</div>
<span id="activeitem" style="color:red;"></span>
<script>
    $(function(){
        removeSection = function(e) {
            $(e).parents(".section").remove();
            $('[data-spy="scroll"]').each(function () {
                var $spy = $(this).scrollspy('refresh')
            });
        }
        $("#navbar-example").scrollspy();
        $('#navbar-example').on('activate.bs.scrollspy', function () {
            var currentItem = $(".nav li.active > a").text();
            $("#activeitem").html("目前您正在查看 - " + currentItem);
        })
    });
</script>

运行范例 »

运行以上范例，输出结果如下

滚动监听( Scrollspy ) 插件事件

更多范例

创建水平滚动监听

下面的范例演示了如何创建水平滚动监听

<!-- The navbar: sed to jump to a section in the scrollable area -->
<nav class="navbar navbar-inverse navbar-fixed-top">...
    <ul class="nav navbar-nav">
        <li><a href="#section1">Section 1</a></li>   
        ...
    </ul>
</nav>

<!-- The scrollable area -->
<div data-spy="scroll" data-target=".navbar" data-offset="12">
    <!-- Section 1-->
    <div id="section1">   
        <h1>Section 1</h1>
        <p>Try to scroll this page and look at the navigation bar while scrolling!</p> 
    </div>
...
</div>

运行范例 »

运行以上范例，输出结果如下

滚动监听( Scrollspy ) 插件

如何创建垂直滚动监听

下面的范例了如何创建垂直滚动监听

<body data-spy="scroll" data-target="#myScrollspy" data-offset="20"> 
    <div class="container">
        <div class="row">     
            <nav class="col-sm-3" id="myScrollspy">       
                <ul class="nav nav-pills nav-stacked">         
                    <li><a href="#section1">Section 1</a></li>         
                    ...       
                </ul>
            </nav>
        </div>
        <div class="col-sm-9">
            <div id="section1">
                <h1>Section 1</h1>
                <p>Try to scroll this page and look at the navigation list while scrolling!</p>
            </div>
            ...
        </div> 
    </div>
</body>

运行范例 »

运行以上范例，输出结果如下

滚动监听( Scrollspy ) 插件

← Bootstrap 下拉菜单插件 ( Dropdown ) Bootstrap 标签页插件 ( Tab ) →

Bootstrap 3 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

♥   简单教程，简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.