-
实现功能
1、当HashKey距离顶点设置滚动区域的有效位置，其导航指定的项目设置。
2、导航必须。导航>李>的结构，和href或数据目标上应结合HashKey
三.菜单上必须有一种导航样式。
4，滚动区域的数据目标与导航父ID（必须是父级）一致。
一
二
三
对ibeone一具体内容一内容具体内容具体内容之一的具体内容具体内容具体内容
的具体内容具体内容两一内容具体内容具体内容具体内容具体内容之一
对三个具体内容一个内容的一个具体内容的一个具体内容具体内容具体内容具体内容
让我们来看一下具体代码的实现。其原理是：当在滚动容器位置偏移设置只有HashKey容器的顶部，我们将在导航设置相应的链接突出。
scrollspy构造函数
首先，创建一个构造函数，如下所示：
功能scrollspy（元，期权）{
这个$ $主体= $（文件体）
这scrollelement =美元。美元（元），（文件。体）$（窗口）：$（元）
this.options（scrollspy.defaults，美元。延长= {}，选项）
This.selector（this.options.target = | |）+资产净值李>。
this.offsets = { }
this.targets = { }
this.activetarget = null
this.scrollheight = 0
这scrollelement.on美元（'scroll。BS。scrollspy，美元。代理（this.process，这））
This.refresh（）
this.process（）
}
构造函数主要做什么：
1、基本设置主要是设置当前滚动体为体或特定元素。其次，导航的结构是导航结构，也就是说，在菜单中也有导航类。
2。要监视元素滚动，执行过程方法。
刷新和处理方法也在3时执行。同时初始化。
以下是其中的一些方法。
getscrolheight方法
获取滚动容器内容的内容（包括隐藏部分）
这scrollelement美元。{ 0 }。scrollheight | | math.max（这。$体{ 0 }。scrollheight，文档。文档元素}。scrollheight）
刷新的方法
Refresh and store the values of each hashkey in the scroll container
（scrollspy.prototype.refresh =功能）{
var =
无功offsetmethod = 'offset
无功offsetbase = 0
this.offsets = { }
this.targets = { }
this.scrollheight = this.getscrollheight（）
如果（！美元。（这iswindow美元。scrollelement { 0 }））{
offsetmethod =下
offsetbase =这scrollelement.scrolltop美元（）。
}
这个，$身体
查找（这个选择器）
映射（函数（）{（））
var $ = $（这个）
VaR href = $ el.data（'target'）el.attr美元（'href）| |
VaR为href = / ^ #。 /。试验（href）$（链接）
收益（$ href
href.length美元
href.is美元（'可见'）
{ { { }（offsetmethod href美元。顶）+ offsetbase，href } }）| |空
}）
排序（函数（A，B）{返回一个{ 0 } - { 0 } }）
每个函数（）{（）
That.offsets.push（本{ 0 }）
That.targets.push（本{ 1 }）
}）
}
它主要体现什么
1。在默认情况下以偏移量获取位置值。如果滚动区域不是窗口，则它是以位置获得的。
如果（！美元。（这iswindow美元。scrollelement { 0 }））{
offsetmethod =下
offsetbase =这scrollelement.scrolltop美元（）。
}
2。相应的偏移值在轧制区HashKey横贯根据导航HashKey。
这个，$身体
查找（这个选择器）
映射（函数（）{（））
var $ = $（这个）
VaR href = $ el.data（'target'）el.attr美元（'href）| |
VaR为href = / ^ #。 /。试验（href）$（链接）
收益（$ href
href.length美元
href.is美元（'可见'）
{ { { }（offsetmethod href美元。顶）+ offsetbase，href } }）| |空
}）
排序（函数（A，B）{返回一个{ 0 } - { 0 } }）
每个函数（）{（）
That.offsets.push（本{ 0 }）
That.targets.push（本{ 1 }）
}）
过程方法
滚动条的事件触发函数用于计算当前导航菜单，需要强调
（scrollspy.prototype.process =功能）{
VaR scrollTop =这scrollelement.scrolltop（）+ this.options.offset美元。
无功scrollheight = this.getscrollheight（）
无功maxscroll = this.options.offset + scrollheight -这scrollelement.height美元（）。
无功补偿= this.offsets
VaR指标= this.targets
无功activetarget = this.activetarget
Var我
如果（this.scrollheight！= scrollheight）{
This.refresh（）
}
如果（scrollTop = maxscroll）{
返回activetarget！=（我=目标{ 1 } targets.length）this.activate（我）
}
如果（activetarget scrollTop <偏移{ 0 }）{
this.activetarget = null
返回this.clear（）
}
对（我= offsets.length；我--；）{
activetarget！=目标{ }
scrollTop > =偏移{我}
（偏移{我+ 1 + 1 } } =定义| | scrollTop <偏移{我）
this.activate（目标{我}）
}
}
主要作用：
1。获取滚动容器的滚动距离：
VaR scrollTop =这scrollelement.scrolltop（）+ this.options.offset美元。
2。滚动容器的最大轧制高度：
无功maxscroll = this.options.offset + scrollheight -这scrollelement.height美元（）。
三.设置滚动元素逻辑以突出显示当前匹配元素：
对（我= offsets.length；我--；）{
activetarget！=目标{ }
scrollTop > =偏移{我}
（偏移{我+ 1 + 1 } } =定义| | scrollTop <偏移{我）
this.activate（目标{我}）
}
积极的方法
设置指定的导航菜单以高亮显示
scrollspy.prototype.activate =函数（目标）{
this.activetarget =目标
This.clear（）
VaR选择器= this.selector +
数据目标++目标，+
this.selector + { href = +目标+rel=nofollow外部rel=外部nofollow
var = $（选择器）
父母（李）。
addClass（主动的）。
如果（active.parent（'。下拉菜单）。长度）{
积极主动=
最接近的（李。下拉）
addClass（主动的）。
}
Active.trigger（'activate。BS。scrollspy）
}
明确的方法
清除所有突出显示菜单
（scrollspy.prototype.clear =功能）{
$（这个选择器）
。parentsuntil（这个选项。目标，'主动'）
removeClass（主动的）。
}
源代码
+函数（$）{
严格使用；
类定义 / / scrollspy
/ / ==========================
功能scrollspy（元，期权）{
这个$ $主体= $（文件体）
这scrollelement =美元。美元（元），（文件。体）$（窗口）：$（元）
this.options（scrollspy.defaults，美元。延长= {}，选项）
This.selector（this.options.target = | |）+资产净值李>。
this.offsets = { }
this.targets = { }
this.activetarget = null
this.scrollheight = 0
这scrollelement.on美元（'scroll。BS。scrollspy，美元。代理（this.process，这））
This.refresh（）
This.process ()
}
scrollspy.version = '3.3.7
scrollspy.defaults = { {
偏移量：10
}
（scrollspy.prototype.getscrollheight =功能）{
退货。$ scrollelement { 0 }。scrollheight | | math.max（这。$体{ 0 }。scrollheight，文档。文档元素}。scrollheight）
}
（scrollspy.prototype.refresh =功能）{
var =
无功offsetmethod = 'offset
无功offsetbase = 0
this.offsets = { }
this.targets = { }
this.scrollheight = this.getscrollheight（）
如果（！美元。（这iswindow美元。scrollelement { 0 }））{
offsetmethod =下
offsetbase =这scrollelement.scrolltop美元（）。
}
这个，$身体
查找（这个选择器）
映射（函数（）{（））
var $ = $（这个）
VaR href = $ el.data（'target'）el.attr美元（'href）| |
VaR为href = / ^ #。 /。试验（href）$（链接）
收益（$ href
href.length美元
href.is美元（'可见'）
{ { { }（offsetmethod href美元。顶）+ offsetbase，href } }）| |空
}）
排序（函数（A，B）{返回一个{ 0 } - { 0 } }）
每个函数（）{（）
That.offsets.push（本{ 0 }）
That.targets.push（本{ 1 }）
}）
}
（scrollspy.prototype.process =功能）{
VaR scrollTop =这scrollelement.scrolltop（）+ this.options.offset美元。
无功scrollheight = this.getscrollheight（）
无功maxscroll = this.options.offset + scrollheight -这scrollelement.height美元（）。
无功补偿= this.offsets
VaR指标= this.targets
无功activetarget = this.activetarget
Var我
如果（this.scrollheight！= scrollheight）{
This.refresh（）
}
如果（scrollTop = maxscroll）{
返回activetarget！=（我=目标{ 1 } targets.length）this.activate（我）
}
如果（activetarget scrollTop <偏移{ 0 }）{
this.activetarget = null
返回this.clear（）
}
对（我= offsets.length；我--；）{
activetarget！=目标{ }
scrollTop > =偏移{我}
（偏移{我+ 1 + 1 } } =定义| | scrollTop <偏移{我）
this.activate（目标{我}）
}
}
scrollspy.prototype.activate =函数（目标）{
this.activetarget =目标
This.clear（）
VaR选择器= this.selector +
数据目标++目标，+
this.selector + { href = +目标+rel=nofollow外部rel=外部nofollow
var = $（选择器）
父母（李）。
addClass（主动的）。
如果（active.parent（'。下拉菜单）。长度）{
积极主动=
最接近的（李。下拉）
addClass（主动的）。
}
Active.trigger（'activate。BS。scrollspy）
}
（scrollspy.prototype.clear =功能）{
$（这个选择器）
。parentsuntil（这个选项。目标，'主动'）
removeClass（主动的）。
}
插件定义 / / scrollspy
/ / ===========================
函数插件（选项）{
返回this.each（函数（）{（）
var $ = $（这个）
VaR数据this.data美元（'bs。scrollspy）
VaR选项=类型选项= 'object'option
如果（！数据）this.data美元（'bs。scrollspy '，（数据=新scrollspy（这个选项））
如果（型）{ }数据选项（选项= 'String'）
}）
}
VaR fn.scrollspy老=美元。
美元fn.scrollspy =插件。
fn.scrollspy.constructor = scrollspy美元。
没有冲突 / / scrollspy
/ / =====================
（美元。fn.scrollspy.noconflict =功能）{
fn.scrollspy =老美元。
返回此
}
scrollspy / / data-api
/阻塞
$（窗口），（负荷。BS。scrollspy。数据API，功能（））{
（数据间谍）（函数（）{）
var $ = $（this）
plugin.call（$间谍，spy.data美元（））
}）
}）
}（jQuery）；
以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。