Implementation of scroll monitor function in Bootstrap
Previous words
The scroll listening plug-in is used to automatically update navigation items based on the position of the scroll bar. Scroll the area below the navigation bar and pay attention to the changes in the navigation items. The items in the drop-down menu will also be automatically highlighted. This article will introduce in detail the Bootstrap scroll monitor
Basic usage
The scroll monitoring plug-in automatically updates the corresponding navigation items in the navigation bar based on the scrolling position. The plug-in can Automatically detect which position has been reached, and then add an active style
to the parent menu element that needs to be highlighted. If there is a drop-down menu in the navigation, and the content of the scroll area reaches the area corresponding to the sub-item of the drop-down menu, In addition to the submenu being highlighted, the parent element of the submenu (dropdown button) will also be highlighted
In daily use, scroll monitoring is generally used in two ways. One is to fix the height of an element. , scroll, and then highlight the corresponding menu; the other is to monitor the scrolling of the entire page (body). The usage of both methods is the same, and both require the following three steps:
1. Set the scroll container, that is, set data-target="#selector" data-spy="scroll" on the element you want to monitor. Attribute
2. Set the menu link container. The id (or style) of the container must be consistent with the selector corresponding to the data-target attribute
3. Within the menu container, there must be. A nav style element, and there is a li element in its content. The a element contained in li can also detect highlighted menu links, which meets the conditions of the .nav li > a selector
4 . Regardless of the implementation method, the component that needs to be monitored for scroll monitoring is position: relative; That is, the relative positioning method
[Fixed element height]
<div id="myNavbar" class="navbar navbar-default navbar-fixed-top" role="navigation" style="position:relative"> <ul class="nav navbar-nav"><li><a href="#html" tabindex="-1">HTML</a></li><li><a href="#css" tabindex="-1">CSS</a></li><li><a href="#javascript" tabindex="-1">javascript</a></li> </ul></div><div data-spy="scroll" data-target="#myNavbar" style="margin-top:150px;height:250px;overflow:auto;position:relative"><h4 id="html">Html</h4><p>Html内容</p><br><p>...</p><br><p>...</p><br><p>...</p><h4 id="css">CSS</h4><p>CSS内容</p><br><p>...</p><br><p>...</p><br><p>...</p><h4 id="javascript">javascript</h4><p>javascript内容</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p></div>
[body element]
<body data-spy="scroll" data-target="#myNavbar" style="height:300px;position:relative"><div id="myNavbar" class="navbar navbar-default navbar-fixed-top" role="navigation"> <ul class="nav navbar-nav"><li><a href="#html" tabindex="-1">HTML</a></li><li><a href="#css" tabindex="-1">CSS</a></li><li><a href="#javascript" tabindex="-1">javascript</a></li> </ul></div><h4 id="html" style="margin-top:150px">Html</h4><p>Html内容</p><br><p>...</p><br><p>...</p><br><p>...</p><h4 id="css">CSS</h4><p>CSS内容</p><br><p>...</p><br><p>...</p><br><p>...</p><h4 id="javascript">javascript</h4><p>javascript内容</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p></body>
In the Bootstrap framework, it is relatively simple to use JavaScript methods to trigger the scroll monitor. You only need to specify the names of two containers.
<div id="myNavbar" class="navbar navbar-default navbar-fixed-top" role="navigation"> <ul class="nav navbar-nav"><li><a href="#html" tabindex="-1">HTML</a></li><li><a href="#css" tabindex="-1">CSS</a></li><li><a href="#javascript" tabindex="-1">javascript</a></li> </ul></div><div id="scrollspy" style="margin-top:150px;height:250px;overflow:auto;position:relative"><h4 id="html">Html</h4><p>Html内容</p><br><p>...</p><br><p>...</p><br><p>...</p><h4 id="css">CSS</h4><p>CSS内容</p><br><p>...</p><br><p>...</p><br><p>...</p><h4 id="javascript">javascript</h4><p>javascript内容</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p></div><script>$('#scrollspy').scrollspy({ target: '#myNavbar' })
</script>
$('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh')
})data-, for example data-offset=""
activate.bs.scrollspy 每当一个新条目被激活后都将由滚动监听插件触发此事件。
<div id="myNavbar" class="navbar navbar-default navbar-fixed-top" role="navigation"> <ul class="nav navbar-nav"><li><a href="#html" tabindex="-1">HTML</a></li><li><a href="#css" tabindex="-1">CSS</a></li><li><a href="#javascript" tabindex="-1">javascript</a></li> </ul></div><div id="scrollspy" data-spy="scroll" data-target="#myNavbar" data-offset="0" style="margin-top:150px;height:250px;overflow:auto;position;relative"><h4 id="html">Html</h4><p>Html内容</p><br><p>...</p><br><p>...</p><br><p>...</p><h4 id="css">CSS</h4><p>CSS内容</p><br><p>...</p><br><p>...</p><br><p>...</p><h4 id="javascript">javascript</h4><p>javascript内容</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p></div><script>$(function(){
$("#myNavbar").on('activate.bs.scrollspy',function(e){
$(e.target).siblings().css('outline','none')
.end().css('outline','1px solid black');
})
})
</script>##JS source code
【1】 IIFE
Use the immediate call function to prevent the code in the plug-in from leaking, thus forming a closed loop, and it can only be expanded from jQuery’s fn
+function ($) {//使用es5严格模式'use strict';//}(window.jQuery); function ScrollSpy(element, options) {this.$body = $(document.body)//判断滚动容器是否是body，如果是则使用window，如果不是则使用该元素本身this.$scrollElement = $(element).is(document.body) ? $(window) : $(element)//将默认值和传进来的options参数合并，后者优先级高this.options = $.extend({}, ScrollSpy.DEFAULTS, options)//如果option里设置了target，即data-target有值，则优先使用//如果没有，则查找通过.nav样式的子元素，即.nav样式内的li子元素内的a链接，作为菜单容器this.selector = (this.options.target || '') + ' .nav li > a'this.offsets = []this.targets = []//高亮显示的菜单this.activeTarget = nullthis.scrollHeight = 0//给滚动容器绑定滚动事件this.$scrollElement.on('scroll.bs.scrollspy', $.proxy(this.process, this))//计算当前页面内所有滚动容器内的id集合和每个id元素距离浏览器顶部的像素距离this.refresh()//开始正式处理this.process()
} //版本是3.3.7
ScrollSpy.VERSION = '3.3.7' //默认值为offset：10
ScrollSpy.DEFAULTS = {
offset: 10
} //获取滚动容器的滚动高度
ScrollSpy.prototype.getScrollHeight = function () {//获取特定滚动容器的滚动高度，如果没有则获取body元素的滚动高度return this.$scrollElement[0].scrollHeight || Math.max(this.$body[0].scrollHeight, document.documentElement.scrollHeight)
}
ScrollSpy.prototype.refresh = function () {var that = thisvar offsetMethod = 'offset'var offsetBase = 0this.offsets = []this.targets = []this.scrollHeight = this.getScrollHeight()if (!$.isWindow(this.$scrollElement[0])) {
offsetMethod = 'position' offsetBase = this.$scrollElement.scrollTop()
}this.$body
.find(this.selector)
.map(function () {var $el = $(this)var href = $el.data('target') || $el.attr('href')var $href = /^#./.test(href) && $(href)//返回一个二维数组，每个滚动容器内的id对象到页面顶部的距离以及高亮菜单容器里所对应的href值return ($href && $href.length && $href.is(':visible') && [[$href[offsetMethod]().top + offsetBase, href]]) || null })
.sort(function (a, b) { return a[0] - b[0] })
.each(function () {//收集所有的偏移值，也就是距离top的距离that.offsets.push(this[0])//收集菜单容器里的所有href值，也就是滚动容器里的id值that.targets.push(this[1])
})
}
ScrollSpy.prototype.process = function () {//获取滚动容器的scrollTop，再加上设置的offset值var scrollTop = this.$scrollElement.scrollTop() + this.options.offset//获取滚动高度var scrollHeight = this.getScrollHeight()//最大滚动=总scrollheight + 设置的offset值 - 设置高度heightvar maxScroll = this.options.offset + scrollHeight - this.$scrollElement.height()var offsets = this.offsetsvar targets = this.targetsvar activeTarget = this.activeTargetvar iif (this.scrollHeight != scrollHeight) { this.refresh()
}//如果超过了最大滚动，说明已经滚动到底了if (scrollTop >= maxScroll) { //如果最后一个元素还没有高亮，则设置最后一个元素高亮 return activeTarget != (i = targets[targets.length - 1]) && this.activate(i)
}if (activeTarget && scrollTop < offsets[0]) { this.activeTarget = null return this.clear()
}//倒序遍历所有元素的offsetfor (i = offsets.length; i--;) { //如果i元素不等于当前高亮元素 activeTarget != targets[i]//滚动高度 大于 i元素的offsets&& scrollTop >= offsets[i]//i+1元素不存在，或者i+1元素大于滚动高度&& (offsets[i + 1] === undefined || scrollTop < offsets[i + 1])//则设置i为高亮元素&& this.activate(targets[i])
}
} //设置高亮菜单元素
ScrollSpy.prototype.activate = function (target) {//赋值实例属性this.activeTarget = targetthis.clear()//查找菜单中符合[data-target+"#' + 所高亮元素的id + '"]属性的元素//或者href值是#' + 所高亮元素的id + '的话，也可以var selector = this.selector +
'[data-target="' + target + '"],' + this.selector + '[href="' + target + '"]'//查找父元素li，然后添加active高亮样式var active = $(selector)
.parents('li')
.addClass('active')//如果li元素的父元素有dropdown-menu样式，则表示是一个dropdown下拉菜单if (active.parent('.dropdown-menu').length) {
active = active
.closest('li.dropdown')//则需要给dropdown的li元素也加上active高亮样式.addClass('active')
}//触发自定义高亮事件active.trigger('activate.bs.scrollspy')
}
//删除其他高亮元素的active样式
ScrollSpy.prototype.clear = function () {
$(this.selector)
.parentsUntil(this.options.target, '.active')
.removeClass('active')
} function Plugin(option) {//根据选择器，遍历所有符合规则的元素return this.each(function () { var $this = $(this) //获取自定义属性bs.scrollspy的值 var data = $this.data('bs.scrollspy') //如果option参数是对象，则作为ScrollSpy的参数传入 var options = typeof option == 'object' && option //如果值不存在，则将ScrollSpy实例设置为bs.scrollSpy值 if (!data) $this.data('bs.scrollspy', (data = new ScrollSpy(this, options))) //如果option传递了string，则表示要执行某个方法 if (typeof option == 'string') data[option]()
})
} var old = $.fn.scrollspy //保留其他库的$.fn.scrollspy代码(如果定义的话)，以便在noConflict之后可以继续使用该老代码
$.fn.scrollspy = Plugin //重设插件构造器，可以通过该属性获取插件的真实类函数
$.fn.scrollspy.Constructor = ScrollSpy $.fn.scrollspy.noConflict = function () { //恢复以前的旧代码$.fn.scrollspy = old//将$.fn.scrollspy.noConflict()设置为Bootstrap的Scrollspy插件return this
} $(window).on('load.bs.scrollspy.data-api', function () {//遍历所有符合条件的滚动容器$('[data-spy="scroll"]').each(function () { var $spy = $(this) //执行scrollspy插件，并传入滚动容器上设置的自定义参数(data-开头) Plugin.call($spy, $spy.data())
})
})The above is the detailed content of Implementation of scroll monitor function in Bootstrap. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1390
52
How to get the bootstrap search bar
Apr 07, 2025 pm 03:33 PM
How to use Bootstrap to get the value of the search bar: Determines the ID or name of the search bar. Use JavaScript to get DOM elements. Gets the value of the element. Perform the required actions.
How to use bootstrap in vue
Apr 07, 2025 pm 11:33 PM
Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.
How to do vertical centering of bootstrap
Apr 07, 2025 pm 03:21 PM
Use Bootstrap to implement vertical centering: flexbox method: Use the d-flex, justify-content-center, and align-items-center classes to place elements in the flexbox container. align-items-center class method: For browsers that do not support flexbox, use the align-items-center class, provided that the parent element has a defined height.
How to write split lines on bootstrap
Apr 07, 2025 pm 03:12 PM
There are two ways to create a Bootstrap split line: using the tag, which creates a horizontal split line. Use the CSS border property to create custom style split lines.
How to use bootstrap button
Apr 07, 2025 pm 03:09 PM
How to use the Bootstrap button? Introduce Bootstrap CSS to create button elements and add Bootstrap button class to add button text
How to resize bootstrap
Apr 07, 2025 pm 03:18 PM
To adjust the size of elements in Bootstrap, you can use the dimension class, which includes: adjusting width: .col-, .w-, .mw-adjust height: .h-, .min-h-, .max-h-
How to set up the framework for bootstrap
Apr 07, 2025 pm 03:27 PM
To set up the Bootstrap framework, you need to follow these steps: 1. Reference the Bootstrap file via CDN; 2. Download and host the file on your own server; 3. Include the Bootstrap file in HTML; 4. Compile Sass/Less as needed; 5. Import a custom file (optional). Once setup is complete, you can use Bootstrap's grid systems, components, and styles to create responsive websites and applications.
How to insert pictures on bootstrap
Apr 07, 2025 pm 03:30 PM
There are several ways to insert images in Bootstrap: insert images directly, using the HTML img tag. With the Bootstrap image component, you can provide responsive images and more styles. Set the image size, use the img-fluid class to make the image adaptable. Set the border, using the img-bordered class. Set the rounded corners and use the img-rounded class. Set the shadow, use the shadow class. Resize and position the image, using CSS style. Using the background image, use the background-image CSS property.
