Bootstrap每天必學(xué)之滾動監(jiān)聽

當(dāng)前位置：首頁 > 范文|應(yīng)用文 > IT技術(shù)專欄 > 網(wǎng)絡(luò)編程

來源：易賢網(wǎng) 閱讀：1206 次日期：2016-07-19 16:11:32

溫馨提示：易賢網(wǎng)小編為您整理了“Bootstrap每天必學(xué)之滾動監(jiān)聽”,方便廣大網(wǎng)友查閱！

本文為大家介紹Bootstrap滾動監(jiān)聽，供大家學(xué)習(xí)，具體內(nèi)容如下

1. Scrollspy currently requires the use of a Bootstrap nav component for proper highlighting of active links.

---- 使用滾動監(jiān)聽的話，導(dǎo)航欄必須采用 class="nav"的nav組件才可以：

下面是源代碼中的一段，標(biāo)紅的部分可以證明這一點(diǎn)：

使用ScrollSpy的時候，需要采用<ul class="nav">標(biāo)簽，并且在<li>下必須有<a>標(biāo)簽。

注：另外我們需要把<ul class="nav">標(biāo)簽放到另一個容器內(nèi)(如div)，并給父容器添加一個id屬性(這一點(diǎn)在第4節(jié)有介紹)

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>標(biāo)簽必須有一個href="#id"屬性，并且在滾動的內(nèi)容里面，必須有對應(yīng)的<a id="id"></a>這樣的標(biāo)簽；當(dāng)內(nèi)容滾動到<a id="id">標(biāo)簽時，對應(yīng)的<li>的<a href="#id">就會自動被選中。

--其實(shí)這一點(diǎn)做過Web開發(fā)的朋友都知道，在之前的HTML版本中，錨標(biāo)記通常采用<a name="tag">這樣的方式，但HTML5中的錨標(biāo)記已經(jīng)拋棄了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.

--- 如果監(jiān)聽Body的滾動，那么你必須給body添加position:relative樣式

--- 如果監(jiān)聽的不是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.

--- 你需要給滾動內(nèi)容的標(biāo)簽添加 data-spy="scroll"屬性和data-target屬性

data-spy 屬性指明了被監(jiān)聽的元素，data-target屬性指明滾動時需要控制的nav高亮顯示

再看一次下面的初始化源代碼，標(biāo)紅的位置，this.options.target的值，就等于滾動內(nèi)容元素的data-target的值，看到這里，你或許已經(jīng)想到，在定義.nav組件的時候，我們需要把.nav放在另一個容器內(nèi)(比如div),且該容器需要有一個id屬性（與這里data-target需要設(shè)置的值相同）。

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()