Source code file:
Implement functions
1. When the hashkey set in the scrolling area reaches the valid position, the specified item on its navigation is set in association.
2. The navigation must be .nav > li > a structure, and the hashkey on a href or data-target must be bound to the hashkey
3. There must be .nav style on the menu
4. The data-target in the scrolling area should be consistent with the navigation parent Id (must be the parent)
<div class="navbar navbar-default">
<ul class="nav navbar-nav">
<li><a href="#one">one</a> </li>
<li><a href="#two">two</a> </li>
<li><a href="#three">three</a> </li>
</ul>
</div>
<div data-spy="scroll" data-target="#selector" style="height:100px; overflow:hidden;overflow-y: auto;" >
<h4 >ibe</h4><p>OneSpecific content<br/>OneSpecific content<br/>OneSpecific content<br/>OneSpecific content<br/>OneSpecific content<br/>OneSpecific content<br/></p>
<h4 >two</h4><p>OneSpecific content<br/>OneSpecific content<br/>OneSpecific content<br/>OneSpecific content<br/>OneSpecific content<br/>OneSpecific content<br/></p>
<h4 >three</h4><p>OneSpecific content<br/>OneSpecific content<br/>OneSpecific content<br/>OneSpecific content<br/>OneSpecific content<br/>OneSpecific content<br/></p>
</div>
Source code analysis:
1. Principle: When the hashkey position in the scroll container is only the value set by offset on the top of the container, the corresponding href highlighting in the navigation will be set.
2. If the scrolling area is a body, the scrolling area element will be marked as window (judged in the constructor)
this.$scrollElement = $(element).is() ? $(window) : $(element)
3. getScrolHeight: Get the content height of the scroll container (including the hidden part)
this.$scrollElement[0].scrollHeight || (this.$body[0].scrollHeight, )
4. Refresh: Refresh and store the values of each hashkey in the scroll container
4.1. Use offset to get the positioning value by default. If the scrolling area is not window, use position to get it.
if (!$.isWindow(this.$scrollElement[0])) {
offsetMethod = 'position'
offsetBase = this.$() //Get the basic height, if there is content in the scrolling area that does not participate in the scrolling calculation }
4.2. Traversing and obtaining the offset value corresponding to the hashkey in the scrolling area according to the hashkey on the navigation:
this.$body
.find()
.map(function () {
var $el = $(this)
var href = $('target') || $('href')
var $href = /^#./.test(href) && $(href) //Get the element corresponding to the hashkey in the scrolling area
return ($href
&& $
&& $(':visible')
&& [[$href[offsetMethod]().top + offsetBase, href]]) || null
})
.sort(function (a, b) { return a[0] - b[0] })
.each(function () {
(this[0])
(this[1])
})
5. Process: The scrollbar event trigger function is used to calculate which navigation menu needs to be highlighted currently
5.1. Get the scrolling distance of the scroll container:
var scrollTop = this.$() +
5.2. The maximum height that the rolling container can roll
//Maximum scrollable height = scroll setting distance (offset) + scroll container content height - the height of scroll container settingvar maxScroll = + scrollHeight - this.$()
5.3. Set scrolling element logic:
for (i = ; i--;) {//Transfer all offsets activeTarget != targets[i] //Judge whether the current target is equal to activeTarget && scrollTop >= offsets[i] //Scroll height> offset of i element && (offsets[i + 1] === undefined || scrollTop < offsets[i + 1]) // The i + 1 element does not exist, or the i + 1 element is not greater than the scroll height && (targets[i]) //Set i as the current active item }
6. Active: Set the specified navigation menu to highlight
7. Clear: Clear all highlighted menus
The above brief discussion of bootstrap source code analysis, scrollspy (scrolling listening), is all the content I share with you. I hope you can give you a reference and I hope you can support me more.