Bootstrap每天必学之滚动监听

Bootstrap每天必学之滚动监听

本文为大家介绍Bootstrap滚动监听，供大家学习，具体内容如下

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

---- 使用滚动监听的话，导航栏必须采用 class="nav"的nav组件才可以：

下面是源代码中的一段，标红的部分可以证明这一点：

使用ScrollSpy的时候，需要采用

注：另外我们需要把

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 home must correspond to something in the DOM like

--- 简单的说，就是

--其实这一点做过Web开发的朋友都知道，在之前的HTML版本中，锚标记 通常采用这样的方式，但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的滚动，那么你必须给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 (http://!$.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

--- 你需要给滚动内容的标签添加 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. 添加标签

2. 在标签内添加.nav组件，并给li->a添加href="#JufhLutag"属性

3. 添加

4. 添加样式#content{height:500px;overflow-y:scroll;opsition:relative;}

5. 添加脚本$('#content').scrollspy({target:'scrollSpyID'});

最后来个小栗子：

第一段

第二段

第三段

　　第一段

　　第二段

　　第三段

$(function () {

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

});

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程

Bootstrap实战教程

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。