Bootstrap 4 自动更新导航插件

自动更新导航插件 ( Scrollspy )会根据滚动条的位置自动更新对应的导航目标

自动更新导航插件主要由两部分组成

滚动区域,以  来识别,且 css 属性 position 要设置为 "relative" 才能起作用
导航区域,以 .navbar 来识别

而滚动区域的 >.navbar ),用于将滚动区域和导航区域联系起来

如果需要点击导航的链接滚动到指定区域,则需要将滚动项元素上的 id (<div id="section1">) 匹配导航栏上的链接选项 ( <a href="#section1">)

如果要在初始化时就滚动到指定的区域,可以使用 >下面的范例演示了自动更新导航插件插件的主要代码


垂直滚动监听

本文内容仅供个人学习/研究/参考使用,不构成任何决策建议或专业指导。分享/转载时请标明原文来源,同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦~感谢您的理解与支持!