---然后总结了使用滚动监听的几个步骤
---最后给出一个简单的例子
---关键的一点：整体有点零散和乱七八糟，辛苦你的思维和眼睛了，呵呵
----------------------------------------------------------------------------------------------------------
1. Scrollspy currently requires the use of a Bootstrap nav component for proper highlighting of active links.
---- 使用滚动监听的话，导航栏必须采用 class="nav"的nav组件才可以：
下面是源代码中的一段，标红的部分可以证明这一点：
使用ScrollSpy的时候，需要采用标签，并且在
注：另外我们需要把标签放到另一个容器内(如div)，并给父容器添加一个id属性(这一点在第4节有介绍)
1 function ScrollSpy(element, options) { 2 this.$body = $(document.body) 3 this.$scrollElement = $(element).is(document.body) ? $(window) : $(element) 4 this.options = $.extend({}, ScrollSpy.DEFAULTS, options) 5 this.selector = (this.options.target || '') + ' .nav li > a' 6 this.offsets = [] 7 this.targets = [] 8 this.activeTarget = null 9 this.scrollHeight = 010 11 this.$scrollElement.on('scroll.bs.scrollspy', $.proxy(this.process, this))12 this.refresh()13 this.process()14 }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
. When scrollspying on elements other than the , 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
). 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. 添加标签
2. 在标签内添加.nav组件，并给li->a添加href="#tag"属性
3. 添加;
4. 添加样式#content{height:500px;overflow-y:scroll;opsition:relative;}
5. 添加脚本$('#content').scrollspy({target:'scrollSpyID'});
最后来个小栗子：
第一段
第二段
第三段
$(function () { $('#body').scrollspy({ target: '#sc' });});
Copyright © 2019-2025 51dongshi.net 版权所有
违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务
