腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

Bootstrap每天必學(xué)之滾動(dòng)監(jiān)聽(tīng)

更新時(shí)間：2016年03月16日 11:38:39 作者：Donie.K

Bootstrap每天必學(xué)之滾動(dòng)監(jiān)聽(tīng)，對(duì)Bootstrap滾動(dòng)監(jiān)聽(tīng)感興趣的小伙伴們可以參考一下

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

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

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

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

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

注：另外我們需要把<ul class="nav">標(biāo)簽放到另一個(gè)容器內(nèi)(如div)，并給父容器添加一個(gè)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>.

--- 簡(jiǎn)單的說(shuō)，就是<li>下的<a>標(biāo)簽必須有一個(gè)href="#id"屬性，并且在滾動(dòng)的內(nèi)容里面，必須有對(duì)應(yīng)的<a id="id"></a>這樣的標(biāo)簽；當(dāng)內(nèi)容滾動(dòng)到<a id="id">標(biāo)簽時(shí)，對(duì)應(yīng)的<li>的<a href="#id">就會(huì)自動(dòng)被選中。

--其實(shí)這一點(diǎn)做過(guò)Web開(kāi)發(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)聽(tīng)Body的滾動(dòng)，那么你必須給body添加position:relative樣式

--- 如果監(jiān)聽(tīng)的不是Body，而是其他得元素[貌似這種方式常見(jiàn)]，那么你需要添加三個(gè)樣式：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.

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

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

再看一次下面的初始化源代碼，標(biāo)紅的位置，this.options.target的值，就等于滾動(dòng)內(nèi)容元素的data-target的值，看到這里，你或許已經(jīng)想到，在定義.nav組件的時(shí)候，我們需要把.nav放在另一個(gè)容器內(nèi)(比如div),且該容器需要有一個(gè)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()
 }

5. After adding position: relative; in your CSS, call the scrollspy via JavaScript:

$('yourTag').scrollspy({ target: 'nav-parent-div-id' })
-- yourTag 就是要承載滾動(dòng)內(nèi)容的元素的ID，nav-parent-div-id 就是.nav元素的父元素的id（也就是data-target的值）

亂七八糟寫了一堆，下面總結(jié)一個(gè)簡(jiǎn)單的幾個(gè)步驟：

　　1. 添加標(biāo)簽<div id="scrollSpyID">

　　2. 在標(biāo)簽內(nèi)添加.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'});

最后來(lái)個(gè)小栗子：

<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 />

　　　　<!-- 這里要有很多內(nèi)容，至少要保證可以滾動(dòng) -->

　　<a id="A">第二段</a><br />

　　　　<!-- 這里要有很多內(nèi)容，至少要保證可以滾動(dòng) -->

　　<a id="A">第三段</a><br />

　　　　<!-- 這里要有很多內(nèi)容，至少要保證可以滾動(dòng) -->

</div>

$(function () {
 $('#body').scrollspy({ target: '#sc' });
});

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附兩個(gè)精彩的專題：Bootstrap學(xué)習(xí)教程 Bootstrap實(shí)戰(zhàn)教程

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

Bootstrap每天必學(xué)之滾動(dòng)監(jiān)聽(tīng)

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具