本文為大家介紹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 = null this.scrollHeight = 0 this.$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 = target this.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 = this var offsetMethod = 'offset' var offsetBase = 0 this.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 = null this.scrollHeight = 0 this.$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' });});如果大家還想深入學習，可以點擊這里進行學習，再為大家附兩個精彩的專題：Bootstrap學習教程Bootstrap實戰教程
以上就是本文的全部內容，希望對大家的學習有所幫助。
新聞熱點
疑難解答
