Bootstrap每天必学之滚动监听

本文为大家介绍Bootstrap滚动监听，供大家学习，具体内容如下
1. Scrollspy currently requires the use of a Bootstrap nav component for proper highlighting of active links.
---- 使用滚动监听的话，导航栏必须采用 class="nav"的nav组件才可以：
下面是源代码中的一段，标红的部分可以证明这一点：
使用ScrollSpy的时候，需要采用<ul class="nav">标签，并且在<li>下必须有<a>标签。
注：另外我们需要把<ul class="nav">标签放到另一个容器内（如div），并给父容器添加一个id属性（这一点在第4节有介绍）

function ScrollSpy（element, options） {this.$body = $（document.body）this.$scrollElement = $（element）.is（document.body） ? $（window） : $（element）this.options= $.extend（{}, ScrollSpy.DEFAULTS, options）this.selector= （this.options.target || ""） + " .nav li > a"this.offsets= []this.targets= []this.activeTarget= nullthis.scrollHeight= 0this.$scrollElement.on（"scroll.bs.scrollspy", $.proxy（this.process, this））this.refresh（）this.process（） }

2. Navbar links must have resolvable id targets. For example, a <a href="#home">home</a> must correspond to something in the DOM like <div id="home"></div>.
--- 简单的说，就是<li>下的<a>标签必须有一个href="#id"属性，并且在滚动的内容里面，必须有对应的<a id="id"></a>这样的标签；当内容滚动到<a id="id">标签时，对应的<li>的<a href="#id">就会自动被选中。
--其实这一点做过Web开发的朋友都知道，在之前的HTML版本中，锚标记通常采用<a name="tag">这样的方式，但HTML5中的锚标记已经抛弃了name属性，而是采用id属性

 ScrollSpy.prototype.activate = function （target） {this.activeTarget = targetthis.clear（）var selector = this.selector + "[data-target="" + target + ""]," + this.selector + "[href="" + target + ""]"var active = $（selector） .parents（"li"） .addClass（"active"）if （active.parent（".dropdown-menu"）.length） { active = active.closest（"li.dropdown"）.addClass（"active"）}active.trigger（"activate.bs.scrollspy"） }

3. No matter the implementation method, scrollspy requires the use of position: relative; on the element you"re spying on. In most cases this is the <body>. When scrollspying on elements other than the <body>, be sure to have a height set and overflow-y: scroll; applied.
--- 如果监听Body的滚动，那么你必须给body添加position:relative样式
--- 如果监听的不是Body，而是其他得元素[貌似这种方式常见]，那么你需要添加三个样式：position:relative;height:500px;overflow-y:scroll;

ScrollSpy.prototype.refresh = function （） {var that = thisvar offsetMethod = "offset"var offsetBase= 0this.offsets = []this.targets = []this.scrollHeight = this.getScrollHeight（）if （！$.isWindow（this.$scrollElement[0]）） { offsetMethod = "position" offsetBase= this.$scrollElement.scrollTop（）}

4. To easily add scrollspy behavior to your topbar navigation, add data-spy="scroll" to the element you want to spy on （most typically this would be the <body>）. Then add the data-target attribute with the ID or class of the parent element of any Bootstrap .navcomponent.
--- 你需要给滚动内容的标签添加 data-spy="scroll"属性和data-target属性
data-spy 属性指明了被监听的元素，data-target属性指明滚动时需要控制的nav高亮显示
再看一次下面的初始化源代码，标红的位置，this.options.target的值，就等于滚动内容元素的data-target的值，看到这里，你或许已经想到，在定义.nav组件的时候，我们需要把.nav放在另一个容器内（比如div）,且该容器需要有一个id属性（与这里data-target需要设置的值相同）。

function ScrollSpy（element, options） {this.$body = $（document.body）this.$scrollElement = $（element）.is（document.body） ? $（window） : $（element）this.options= $.extend（{}, ScrollSpy.DEFAULTS, options）this.selector= （this.options.target || ""） + " .nav li > a"this.offsets= []this.targets= []this.activeTarget= nullthis.scrollHeight= 0this.$scrollElement.on（"scroll.bs.scrollspy", $.proxy（this.process, this））this.refresh（）this.process（） }

5. After adding position: relative; in your CSS, call the scrollspy via JavaScript:
$（"yourTag"）.scrollspy（{ target: "nav-parent-div-id" }）
-- yourTag 就是要承载滚动内容的元素的ID，nav-parent-div-id 就是.nav元素的父元素的id（也就是data-target的值）
乱七八糟写了一堆，下面总结一个简单的几个步骤：
1. 添加标签<div id="scrollSpyID">
2. 在标签内添加.nav组件，并给li->a添加href="#tag"属性
3. 添加<div id="content" data-spy="scroll" data-target="#scrollSpyID">;
4. 添加样式#content{height:500px;overflow-y:scroll;opsition:relative;}
5. 添加脚本$（"#content"）.scrollspy（{target:"scrollSpyID"}）;
最后来个小栗子：

<style type="text/css">#body {position: relative;height: 500px;overflow-y: scroll;}</style>

<div id="sc"><ul class="nav nav-pills"><li class="active"><a href="#A">第一段</a></li><li><a href="#B">第二段</a></li><li><a href="#C">第三段</a></li></ul></div>

<div id="body" class="container-fluid" data-spy="scroll" data-target="#sc">  <a id="A">第一段</a><br />    <！-- 这里要有很多内容，至少要保证可以滚动 -->  <a id="A">第二段</a><br />    <！-- 这里要有很多内容，至少要保证可以滚动 -->  <a id="A">第三段</a><br />    <！-- 这里要有很多内容，至少要保证可以滚动 --></div>

$（function （） {$（"#body"）.scrollspy（{ target: "#sc" }）;}）;

以上就是本文的全部内容，希望对大家的学习有所帮助。