Bootstrap - Scroll spy Plugin

Bootstrap Scrollspy Plugin - 从概述，环境设置，基本结构，全局样式，网格系统，流体网格系统，布局，响应式设计，排版，表格，按钮，图像，图标，下拉列表，按钮开始，简单易学地学习Bootstrap组，导航元素，导航栏，面包屑，分页，标签，徽章，版式，缩略图，警报，进度栏，媒体对象，Javascript插件像过渡，模态，下拉列表，Scrollspy，选项卡，工具提示，弹出，警报，按钮，折叠， Carousel，Typeahead，Affix，Glyphicons，Jumbotron，Demos。

Scroll间谍(自动更新导航)插件允许您根据滚动位置定位页面的各个部分.在基本实现中，滚动时，可以根据滚动位置将 .active 类添加到导航栏.

如果要包含此插件功能单独地，你需要 scrollspy.js .另外，如 Bootstrap插件概述一章所述，您可以包含 bootstrap.js 或缩小 bootstrap.min.js .

用法

您可以将rolllspy行为添加到顶部栏导航 :

通过数据属性 : 将 data-spy ="scroll"添加到您要侦听的元素(通常是正文).然后使用任何Bootstrap .nav 组件的父元素的ID或类添加属性 data-target .为此，您必须在页面正文中包含与您正在监视的链接的匹配ID的元素.

   ...                  ...

...

通过JavaScript : 您可以使用JavaScript调用scrollspy而不是使用数据属性，选择要监视的元素，然后调用 .scrollspy()函数 :

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

示例

以下示例显示了通过数据属性使用scrollspy插件 :

                     Toggle navigation                                       Tutorial Name

iOS

SVN

Java

jmeter

ejb

spring

iOS

iOS is a mobile operating system developed and distributed by Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and Apple TV. iOS is derived from OS X, with which it shares the Darwin foundation. iOS is Apple's mobile version of the OS X operating system used on Apple computers.

SVN

Apache Subversion which is often abbreviated as SVN, is a software versioning and revision control system distributed under an open source license. Subversion was created by CollabNet Inc. in 2000, but now it is developed as a project of the Apache Software Foundation, and as such is part of a rich community of developers and users.

jMeter

jMeter is an Open Source testing software. It is 100% pure Java application for load and performance testing.

EJB

Enterprise Java Beans (EJB) is a development architecture for building highly scalable and robust enterprise level applications to be deployed on J2EE compliant Application Server such as JBOSS, Web Logic etc.

Spring

Spring framework is an open source Java platform that provides comprehensive infrastructure support for developing robust Java applications very easily and very rapidly.

Spring framework was initially written by Rod Johnson and was first released under the Apache 2.0 license in June 2003.

Options

选项可以通过数据属性或JavaScript传递。下表列出了选项:

Option Name	Type/Default Value	Data attribute name	Description
offset	number Default: 10	data-offset	Pixels to offset from top when calculating position of scroll.

Methods

scrollspy（'refresh'）＆minus; 通过JavaScript方法调用scrollspy时，需要调用.refresh方法来更新DOM。如果DOM的任何元素发生了变化，即添加或删除了某些元素，这将非常有用。以下是使用此方法的语法。

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

Example

以下示例演示了.scrollspy（'refresh'）方法的用法:

                     Toggle navigation                                       Tutorial Name                        iOS         SVN
                                             Java                                                                   jmeter
               ejb
                                             spring
                                                         iOS         × Remove this section                  iOS is a mobile operating system developed and distributed by          Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and          Apple TV. iOS is derived from OS X, with which it shares the Darwin          foundation. iOS is Apple's mobile version of the OS X operating system         used on Apple computers.
               SVN      Apache Subversion which is often abbreviated as SVN, is a software          versioning and revision control system distributed under an open source          license. Subversion was created by CollabNet Inc. in 2000, but          now it is developed as a project of the Apache Software Foundation,          and as such is part of a rich community of developers and users.
               jMeter         × Remove this section                  jMeter is an Open Source testing software. It is 100% pure Java          application for load and performance testing.
               EJB            Enterprise Java Beans (EJB) is a development architecture for          building highly scalable and robust enterprise level applications          to be deployed on J2EE compliant Application Server such as          JBOSS, Web Logic etc.
            Spring            Spring framework is an open source Java platform that provides          comprehensive infrastructure support for developing robust Java          applications very easily and very rapidly.
            Spring framework was initially written by Rod Johnson and was first          released under the Apache 2.0 license in June 2003.
         $(function(){      removeSection = function(e) {         $(e).parents(".section").remove();                  $('[data-spy = "scroll"]').each(function () {            var $spy = $(this).scrollspy('refresh')         });      }      $("#myScrollspy").scrollspy();   });

Events

下表列出了使用scrollspy的事件.此事件可用于挂钩函数.

事件	描述	示例
activate.bs.scrollspy	只要新项目被scrollspy激活，此事件就会触发.	$('＃myScrollspy').on('activate.bs.scrollspy'，function(){//做某事...... })

示例

以下示例演示如何使用 activate.bs.scrollspy event :

                                                                                                                                                         Toggle navigation                                                                                    Tutorials Point                                                                                 Subject 1                  Subject 2
                                 Subject 3                                                                  Subject 3.1
                        Subject 3.2
                        Subject 3.3
                                                                              Subject 4
                                                                                                         Subject 1                   Remove Subject ×                                          Lorem ipsum dolor sit amet, consectetur adipisicing elit,                  sed do eiusmod tempor incididunt ut labore et dolore magna                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation                  ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        
                                    Subject 2                   Remove Subject ×                                          Lorem ipsum dolor sit amet, consectetur adipisicing elit,                  sed do eiusmod tempor incididunt ut labore et dolore magna                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation                  ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        
                                    Subject 3                    Remove Subject ×                                          Lorem ipsum dolor sit amet, consectetur adipisicing elit,                  sed do eiusmod tempor incididunt ut labore et dolore magna                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation                  ullamco laboris nisi ut aliquip ex ea commodo consequat.
<                        
                                       Subject 3.1                   Remove Subject ×                                             Lorem ipsum dolor sit amet, consectetur adipisicing elit,                  sed do eiusmod tempor incididunt ut labore et dolore magna                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation                  ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                                   Subject 3.2                   Remove Subject ×                                             Lorem ipsum dolor sit amet, consectetur adipisicing elit,                  sed do eiusmod tempor incididunt ut labore et dolore magna                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation                  ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                                   Subject 3.3                   Remove Subject ×                                             Lorem ipsum dolor sit amet, consectetur adipisicing elit,                  sed do eiusmod tempor incididunt ut labore et dolore magna                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation                  ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        
                                       Subject 4                   Remove Subject ×                                             Lorem ipsum dolor sit amet, consectetur adipisicing elit,                  sed do eiusmod tempor incididunt ut labore et dolore magna                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation                  ullamco laboris nisi ut aliquip ex ea commodo consequat.