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
--- If you monitor the scrolling of the Body, then you must add the position:relative style to the body
--- If what is being monitored is not the Body, but other elements [seemingly this method is common], then you need to add three styles: 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()
}
Copy after login
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.
--- You need to add the data-spy="scroll" attribute and data-target attribute to the label of the scrolling content
The data-spy attribute specifies the element to be monitored, and the data-target attribute specifies the nav highlighting that needs to be controlled during scrolling
Look at the initialization source code below again. The position marked in red, the value of this.options.target, is equal to the value of the data-target of the scrolling content element. Seeing this, you may have thought that before defining .nav When making a component, we need to put the .nav in another container (such as a div), and the container needs to have an id attribute (the same value as the data-target needs to be set here).
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()
}
Copy after login
Copy after login
5. After adding position: relative; in your CSS, call the scrollspy via JavaScript:
$('yourTag').scrollspy({ target: 'nav-parent-div-id' })
-- yourTag is the ID of the element to carry the scrolling content, nav-parent-div-id is the id of the parent element of the .nav element (that is, the value of data-target)
I wrote a bunch of messy stuff, here is a summary of a few simple steps:
1. Add tag
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
