Scrollspy: Navs in different tabs can interfere with each other
Created by: nellamad
Navs within different tabs can have similar offsets which can cause the activeTarget
to switch to an element that is not currently displayed. This issue can be fixed by calling Scrollspy.refresh
if the function is edited to include .filter(':visible')
after executing its selector.
ScrollSpy.prototype.refresh = function () {
var offsetMethod = this.$element[0] == window ? 'offset' : 'position'
this.offsets = $([])
this.targets = $([])
var self = this
var $targets = this.$body
.find(this.selector)
.filter(':visible')
.map(function () {
var $el = $(this)
var href = $el.data('target') || $el.attr('href')
var $href = /^#\w/.test(href) && $(href)
return ($href
&& $href.length
&& [[ $href[offsetMethod]().top + (!$.isWindow(self.$scrollElement.get(0)) && self.$scrollElement.scrollTop()), href ]]) || null
})
.sort(function (a, b) { return a[0] - b[0] })
.each(function () {
self.offsets.push(this[0])
self.targets.push(this[1])
})
}
Is this the direction that should be taken? The Scrollspy docs state that refresh is only needed in the case of new DOM elements, so we'd be adding a new purpose for it.