目录web前端全系列 教程
1839个小节阅读：2243.3k
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本，未来主流的版本
人工智能 教程
顺势而为，AI创新未来
大厂算法 教程
算法，程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
滚动监听插件是用来根据滚动条所处的位置来自动更新导航项的
注意事项
- 需要相对定位：
body需要设置为relative- 通过 data 属性调用：
data-spy="scroll"
xxxxxxxxxx<html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/bootstrap.min.css"> <script src="./js/jquery-3.6.0.min.js"></script> <script src="./js/bootstrap.min.js"></script> <style> body { position: relative; } ul.nav-pills { top: 20px; position: fixed; } .content div { height: 600px; } </style></head><body data-spy="scroll"> <div class="container"> <div class="row"> <nav class="col-sm-3" id="myScrollspy"> <ul class="nav nav-pills flex-column"> <li class="nav-item"> <a class="nav-link active" href="#section1">Section 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#section2">Section 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#section3">Section 3</a> </li> </ul> </nav> <div class="col-sm-9 content"> <div id="section1" class="bg-success"> <h1>Section 1</h1> <p>Try to scroll this section and look at the navigation list while scrolling!</p> </div> <div id="section2" class="bg-warning"> <h1>Section 2</h1> <p>Try to scroll this section and look at the navigation list while scrolling!</p> </div> <div id="section3" class="bg-danger"> <h1>Section 3</h1> <p>Try to scroll this section and look at the navigation list while scrolling!</p> </div> </div> </div> </div></body></html>| 事件类型 | 描述 |
|---|---|
activate.bs.scrollspy | 每当一个新条目被激活后都将由滚动监听插件触发此事件 |
xxxxxxxxxx$('#myScrollspy').on('activate.bs.scrollspy', function () { console.log("滚动监听");})实时效果反馈
1. 要实现滚动监听效果，body需要设置定位为？：
A static
B relative
C absolute
D fixed
答案
1=>B