Bootstrap 滚动监听（Scrollspy）插件

news2024/9/25 17:20:20

 滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动，基于滚动条的位置向导航栏添加 .active class。

如果您想要单独引用该插件的功能，那么您需要引用 scrollspy.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

用法

您可以向顶部导航添加滚动监听行为：

  • 通过 data 属性：向您想要监听的元素（通常是 body）添加 data-spy="scroll"。然后添加带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 data-target。为了它能正常工作，您必须确保页面主体中有匹配您所要监听链接的 ID 的元素存在。
<body data-spy="scroll" data-target=".navbar-example">
...
<div class="navbar-example">
    <ul class="nav nav-tabs">
        ...
    </ul>
</div>
...
</body>

通过 JavaScript：您可以通过 JavaScript 调用滚动监听，选取要监听的元素，然后调用 .scrollspy() 函数：

$('body').scrollspy({ target: '.navbar-example' })

实例

下面的实例演示了通过 data 属性使用滚动监听（Scrollspy）插件：

实例

<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
    <div class="container-fluid"> 
    <div class="navbar-header">
        <button class="navbar-toggle" type="button" data-toggle="collapse"
                data-target=".bs-js-navbar-scrollspy">
            <span class="sr-only">切换导航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">教程名称</a>
    </div>
    <div class="collapse navbar-collapse bs-js-navbar-scrollspy">
        <ul class="nav navbar-nav">
            <li><a href="#ios">iOS</a></li>
            <li><a href="#svn">SVN</a></li>
            <li class="dropdown">
                <a href="#" id="navbarDrop1" class="dropdown-toggle"
                   data-toggle="dropdown">Java
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu" role="menu"
                    aria-labelledby="navbarDrop1">
                    <li><a href="#jmeter" tabindex="-1">jmeter</a></li>
                    <li><a href="#ejb" tabindex="-1">ejb</a></li>
                    <li class="divider"></li>
                    <li><a href="#spring" tabindex="-1">spring</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div> 
</nav>
<div data-spy="scroll" data-target="#navbar-example" data-offset="0"
     style="height:200px;overflow:auto; position: relative;">
    <h4 id="ios">iOS</h4>
    <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple
        TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。
    </p>
    <h4 id="svn">SVN</h4>
    <p>Apache Subversion，通常缩写为 SVN，是一款开源的版本控制系统软件。Subversion 由 CollabNet 公司在 2000 年创建。但是现在它已经发展为 Apache Software Foundation 的一个项目，因此拥有丰富的开发人员和用户社区。
    </p>
    <h4 id="jmeter">jMeter</h4>
    <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。
    </p>
    <h4 id="ejb">EJB</h4>
    <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
    </p>
    <h4 id="spring">Spring</h4>
    <p>Spring 框架是一个开源的 Java 平台，为快速开发功能强大的 Java 应用程序提供了完备的基础设施支持。
    </p>
    <p>Spring 框架最初是由 Rod Johnson 编写的，在 2003 年 6 月首次发布于 Apache 2.0 许可证下。
    </p>
</div>

结果如下所示：

滚动监听（Scrollspy）插件

选项

通过 data 属性或 JavaScript 来传递。下表列出了这些选项：

选项名称类型/默认值Data 属性名称描述
offsetnumber
默认值：10		data-offset当计算滚动位置时，距离顶部的偏移像素。

方法

.scrollspy('refresh')：当通过 JavaScript 调用 scrollspy 方法时，您需要调用 .refresh 方法来更新 DOM。这在 DOM 的任意元素发生变更（即，您添加或移除了某些元素）时非常有用。下面是使用该方法的语法。

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

实例

下面的实例演示了 .scrollspy('refresh') 方法的用法：

实例

<nav id="myScrollspy" class="navbar navbar-default navbar-static" role="navigation">
    <div class="container-fluid"> 
    <div class="navbar-header">
        <button class="navbar-toggle" type="button" data-toggle="collapse"
                data-target=".bs-js-navbar-scrollspy">
            <span class="sr-only">切换导航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">教程名称</a>
    </div>
    <div class="collapse navbar-collapse bs-js-navbar-scrollspy">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#ios">iOS</a></li>
            <li><a href="#svn">SVN</a></li>
            <li class="dropdown">
                <a href="#" id="navbarDrop1" class="dropdown-toggle"
                   data-toggle="dropdown">Java
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu" role="menu"
                    aria-labelledby="navbarDrop1">
                    <li><a href="#jmeter" tabindex="-1">jmeter</a></li>
                    <li><a href="#ejb" tabindex="-1">ejb</a></li>
                    <li class="divider"></li>
                    <li><a href="#spring" tabindex="-1">spring</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>
<div data-spy="scroll" data-target="#myScrollspy" data-offset="0"
     style="height:200px;overflow:auto; position: relative;">
    <div class="section">
        <h4 id="ios">iOS<small><a href="#" onclick="removeSection(this);">
                    &times; 删除该部分</a></small>
        </h4>
        <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple
            TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>
    </div>
    <div class="section">
        <h4 id="svn">SVN<small></small></h4>
        <p>Apache Subversion，通常缩写为 SVN，是一款开源的版本控制系统软件。Subversion 由 CollabNet 公司在 2000 年创建。但是现在它已经发展为 Apache Software Foundation 的一个项目，因此拥有丰富的开发人员和用户社区。</p>
    </div>
    <div class="section">
        <h4 id="jmeter">jMeter<small><a href="#" onclick="removeSection(this);">
                    &times; 删除该部分</a></small>
        </h4>
        <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
    </div>
    <div class="section">
        <h4 id="ejb">EJB</h4>
        <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。</p>
    </div>
    <div class="section">
        <h4 id="spring">Spring</h4>
        <p>Spring 框架是一个开源的 Java 平台，为快速开发功能强大的 Java 应用程序提供了完备的基础设施支持。</p>
        <p>Spring 框架最初是由 Rod Johnson 编写的，在 2003 年 6 月首次发布于 Apache 2.0 许可证下。</p>
    </div>
</div>
<script>
    $(function(){
        removeSection = function(e) {
            $(e).parents(".section").remove();
            $('[data-spy="scroll"]').each(function () {
                var $spy = $(this).scrollspy('refresh')
            });
        }
        $("#myScrollspy").scrollspy();
    });
</script>

结果如下所示：

滚动监听（Scrollspy）插件方法

事件

下表列出了滚动监听中要用到事件。这些事件可在函数中当钩子使用。

事件描述实例
activate.bs.scrollspy每当一个新项目被滚动监听激活时，触发该事件。 
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // 执行一些动作...
})

实例

下面的实例演示了 activate.bs.scrollspy 事件的用法：

实例

<nav id="myScrollspy" class="navbar navbar-default navbar-static" role="navigation">
    <div class="container-fluid"> 
    <div class="navbar-header">
        <button class="navbar-toggle" type="button" data-toggle="collapse"
                data-target=".bs-js-navbar-scrollspy">
            <span class="sr-only">切换导航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">教程名称</a>
    </div>
    <div class="collapse navbar-collapse bs-js-navbar-scrollspy">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#ios">iOS</a></li>
            <li><a href="#svn">SVN</a></li>
            <li class="dropdown">
                <a href="#" id="navbarDrop1" class="dropdown-toggle"
                   data-toggle="dropdown">
                    Java <b class="caret"></b>
                </a>
                <ul class="dropdown-menu" role="menu"
                    aria-labelledby="navbarDrop1">
                    <li><a href="#jmeter" tabindex="-1">jmeter</a></li>
                    <li><a href="#ejb" tabindex="-1">ejb</a></li>
                    <li class="divider"></li>
                    <li><a href="#spring" tabindex="-1">spring</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div> 
</nav>
<div data-spy="scroll" data-target="#myScrollspy" data-offset="0"
     style="height:200px;overflow:auto; position: relative;">
    <div class="section">
        <h4 id="ios">iOS<small><a href="#" onclick="removeSection(this);">
                    &times; 删除该部分</a></small>
        </h4>
        <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple
            TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>
    </div>
    <div class="section">
        <h4 id="svn">SVN<small></small></h4>
        <p>Apache Subversion，通常缩写为 SVN，是一款开源的版本控制系统软件。Subversion 由 CollabNet 公司在 2000 年创建。但是现在它已经发展为 Apache Software Foundation 的一个项目，因此拥有丰富的开发人员和用户社区。</p>
    </div>
    <div class="section">
        <h4 id="jmeter">jMeter<small><a href="#" onclick="removeSection(this);">
                    &times; 删除该部分</a></small>
        </h4>
        <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
    </div>
    <div class="section">
        <h4 id="ejb">EJB</h4>
        <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。</p>
    </div>
    <div class="section">
        <h4 id="spring">Spring</h4>
        <p>Spring 框架是一个开源的 Java 平台，为快速开发功能强大的 Java 应用程序提供了完备的基础设施支持。</p>
        <p>Spring 框架最初是由 Rod Johnson 编写的，在 2003 年 6 月首次发布于 Apache 2.0 许可证下。</p>
    </div>
</div>
<span id="activeitem" style="color:red;"></span>
<script>
    $(function(){
        removeSection = function(e) {
            $(e).parents(".section").remove();
            $('[data-spy="scroll"]').each(function () {
                var $spy = $(this).scrollspy('refresh')
            });
        }
        $("#myScrollspy").scrollspy();
        $('#myScrollspy').on('activate.bs.scrollspy', function () {
            var currentItem = $(".nav li.active > a").text();
            $("#activeitem").html("目前您正在查看 - " + currentItem);
        })
    });
</script>

结果如下所示：

滚动监听（Scrollspy）插件事件

更多实例

创建水平滚动监听

以下实例演示了如何创建水平滚动监听:

实例

<!-- The navbar: 
   used to jump to a section in the scrollable area --><nav
		class="navbar navbar-inverse navbar-fixed-top">...  <ul class="nav
   navbar-nav">    <li><a href="#section1">Section 1</a></li>   
		...</nav><!-- The scrollable area --><div data-spy="scroll"
		data-target=".navbar" data-offset="12">  <!-- Section 1
   -->  <div id="section1">   
		<h1>Section 1</h1>    <p>Try to scroll this page and look at
		the navigation bar while scrolling!</p> 
		</div>  ...</div>

如何创建垂直滚动监听

以下实例演示了如何创建垂直滚动监听:

实例

<body data-spy="scroll" data-target="#myScrollspy" data-offset="20"> 
		<div class="container">    <div class="row">     
		<nav class="col-sm-3" id="myScrollspy">       
		<ul class="nav nav-pills nav-stacked">         
		<li><a href="#section1">Section 1</a></li>         
		...       
		</ul>      </nav>      <div
		class="col-sm-9">        <div id="section1">           <h1>Section 1</h1>          <p>Try to
		scroll this page and look at the navigation list while scrolling!</p>        </div>
		        ...      </div>    </div> 
		</div></body>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2073660.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

快团团团长如何高质量选品？如何做最懂顾客的团长！

快团团团长如何高质量选品？如何做最懂顾客的团长！

精准的用户画像&#xff0c;能够帮助团长个性化推荐&#xff0c;精细化营销&#xff0c;提升消费粘性&#xff0c;秒提下单率。 数据中心 用户画像 用户画像的核心&#xff0c;是为用户打标签。 将用户的每个具体信息抽象成标签&#xff0c;利用这些标签将用户具体化&#…
阅读更多...
Docker数据卷使用手册

Docker数据卷使用手册

目录 目标 前言 概念 官方文档 匿名卷&#xff08;Anonymous Volumes&#xff09; 简介 案例 命名卷&#xff08;Named Volumes&#xff09; 简介 案例 目标 掌握Volume命令通过演示案例&#xff0c;理解数据卷种类与各自的用途。 前言 我们在很多网上教程上可以看到…
阅读更多...
位数问题c++

位数问题c++

题目描述 在所有的N位数中&#xff0c;有多少个数中有偶数个数字3&#xff0c;由于结果可能很大&#xff0c;你只需要输出这个答案对12345取余的值。 输入 读入一个数N(N≤1000) 输出 输出有多少个数中有偶数个数字3。 样例输入 2 样例输出 73样例解释&#xff1a; 1…
阅读更多...
【SpringCloud Alibaba】（八）学习 Sentinel 核心技术与配置规则（下）

【SpringCloud Alibaba】（八）学习 Sentinel 核心技术与配置规则（下）

目录 1. 热点规则1.1 演示热点规则1.2 演示热点高级选项规则 2. 授权规则2.1 演示授权规则 3. 系统规则3.1 演示系统规则 4. SentinelResource 注解4.1 SentinelResource 注解概述4.2 演示 SentinelResource 注解4.2.1 定义限流和降级后的处理方法4.2.2 在外部类中指定限流和异…
阅读更多...
Python酷库之旅-第三方库Pandas(098)

Python酷库之旅-第三方库Pandas(098)

目录 一、用法精讲 421、pandas.DataFrame.infer_objects方法 421-1、语法 421-2、参数 421-3、功能 421-4、返回值 421-5、说明 421-6、用法 421-6-1、数据准备 421-6-2、代码示例 421-6-3、结果输出 422、pandas.DataFrame.copy方法 422-1、语法 422-2、参数 …
阅读更多...
sheng的学习笔记-AI-半监督学习

sheng的学习笔记-AI-半监督学习

AI目录&#xff1a;sheng的学习笔记-AI目录-CSDN博客 基础知识 什么是半监督学习 我们在丰收季节来到瓜田&#xff0c;满地都是西瓜&#xff0c;瓜农抱来三四个瓜说这都是好瓜&#xff0c;然后再指着地里的五六个瓜说这些还不好&#xff0c;还需再生长若干天。基于这些信息&a…
阅读更多...
前端面试题-场景设计题

前端面试题-场景设计题

1. 如何使用 css 画一个三角形 借助 border 实现&#xff0c;在 width 和 height 都为 0 时&#xff0c;设置 border&#xff0c;便会呈现三角形。想要哪个方向的三角形&#xff0c;设置其他三边为 透明即可。 同时&#xff0c;可以通过调整不同边的宽度&#xff0c;来调整三角…
阅读更多...
巨省成本的电子版招生简章越来越流行，你知道是怎么制作的吗？

巨省成本的电子版招生简章越来越流行，你知道是怎么制作的吗？

随着科技的不断发展&#xff0c;传统的纸质招生简章逐渐被电子版招生简章所取代。电子版招生简章不仅能够节省大量成本&#xff0c;还能够提高宣传效果&#xff0c;因此在市场上越来越流行。你知道它是怎么制作的吗&#xff1f; 1.要制作电子杂志,首先需要选择一款适合自己的软…
阅读更多...
Milvus在数派数据大模型业务中的实践

Milvus在数派数据大模型业务中的实践

01. 写在前面 云南数派数据科技有限公司是一家总部位于美丽春城昆明的大模型创新企业&#xff0c;在深圳和昆明双城并立&#xff0c;设立了两个研发中心。我们的旗舰产品——SUPIEDT大模型开发平台&#xff0c;作为一款全生命周期的异构算力大模型开发平台&#xff0c;集一站式…
阅读更多...
推荐3款好用的电脑动态壁纸软件，资源丰富,图片精美

推荐3款好用的电脑动态壁纸软件，资源丰富,图片精美

WinDynamicDesktop WinDynamicDesktop是一款将macOS Mojave的动态桌面功能移植到Windows平台上的开源软件。它允许用户根据时间、地点和天气等条件自动更换壁纸&#xff0c;从而实现类似macOS系统中的动态壁纸效果。 该软件的主要特点包括&#xff1a; 动态壁纸&#xff1a;W…
阅读更多...
查找1

查找1

一、查找的基本概念 二、线性表的查找 1&#xff09;顺序查找&#xff08;线性查找&#xff09; 2&#xff09;折半查找&#xff08;二分或对分查找&#xff09; 3)&#xff08;分块&#xff09;索引查找
阅读更多...
具有宽输入电压范围的75V同步降压控制器LM5145

具有宽输入电压范围的75V同步降压控制器LM5145

芯品快报：亚德诺（ADI）汽车音频总线AB收发器AD2428 这周末，除非外面下钞票，否则谁也拦不住我玩《黑神话悟空》（附：两款可以玩转悟空的显卡推荐） LM5145是德州仪器推出的一款具有较宽输入电压的75V同步降压控制器，其输入电压范围可达6V~75V，具有0.8V~60V可调整的输出…
阅读更多...
【研发日记】嵌入式处理器技能解锁(五)——TI C2000 DSP的中断系统

【研发日记】嵌入式处理器技能解锁(五)——TI C2000 DSP的中断系统

文章目录 前言 背景介绍 中断框架 外设中断 ePIE模块 CPU中断 中断嵌套 应用实例 总结 参考资料 前言 见《【研发日记】嵌入式处理器技能解锁(一)——多任务异步执行调度的三种方法》 见《【研发日记】嵌入式处理器技能解锁(二)——TI C2000 DSP的SCI(串口)通信》 见…
阅读更多...
大数据中台建设整体技术方案（中台设计）word完整版

大数据中台建设整体技术方案（中台设计）word完整版

1. 中台概念 2. 推动企业组织模式演进 3. 建设方法 4 .中台内容 5. 数据安全体系 中台内容围绕数据中台建设评估、整体框架、数据采集&#xff0c;结构化、半结构化、非结构化的数据采集&#xff0c;数据计算能力、存储计算引擎、数据架构、数据挖掘、各种不同数据层建设、模型…
阅读更多...
ssrf+redis

ssrf+redis

curl支持很多协议&#xff0c;有FTP, FTPS, HTTP, HTTPS, GOPHER, TELNET, DICT, FILE以及LDA dict被禁用了用&#xff08;?urlhttp://172.19.0.3端口&#xff09;来探测一下端口吧 172.19.0.3主机只开放一个80端口 看看内网还有其他服务器没 这里可以看到内网还有一台172.1…
阅读更多...
【Python】给动态图片加水印

【Python】给动态图片加水印

文章目录 原文&#xff1a;https://blog.c12th.cn/archives/35.html前言部分代码ini文件CMD 完整代码使用教程(打包整理后文件)注意事项 最后 原文&#xff1a;https://blog.c12th.cn/archives/35.html 前言 之前 图片加水印 是对于静态图片&#xff0c;而现在这个是对动态图片…
阅读更多...
一个快速简单的工具来分析SSL/TLS协议数据帧 （C/C++代码实现）

一个快速简单的工具来分析SSL/TLS协议数据帧 （C/C++代码实现）

SSL/TLS协议是网络安全通信的基石&#xff0c;它通过在客户端和服务器之间建立一个加密的通道&#xff0c;确保数据传输的安全性和完整性。SSL&#xff08;Secure Sockets Layer&#xff09;最初由Netscape公司开发&#xff0c;而TLS&#xff08;Transport Layer Security&…
阅读更多...
Renesa Version Board开发RT-Thread 之UART驱动应用

Renesa Version Board开发RT-Thread 之UART驱动应用

目录 概述 1 硬件介绍 2 软件配置 2.1 RT-Thread Studio配置参数 2.2 FSP配置MCU 3 RT-Thread中UART的接口介绍 3.1 RT-Thread UART简介 3.2 RT-Thread 下的UART接口 4 UART的应用 4.1 应用功能实现 4.2 源代码文件 5 测试 程序下载地址&#xff1a; RenesaVersio…
阅读更多...
Open3D 最小点约束的体素滤波（34）

Open3D 最小点约束的体素滤波（34）

Open3D 最小点约束的体素滤波（34） 一、算法介绍二、算法流程三、算法代码四、实现效果一、算法介绍 体素滤波可以达到快速减少点云数量的目的，而海量点云往往是需要这一步骤才可以进行后续处理的，比如配准时使用千万级别的原始点云配准显然是不合理的，因此体素滤波是比较重…
阅读更多...
Mybatis搭建配置文件基础用法参数传递

Mybatis搭建配置文件基础用法参数传递

背景介绍 Mybatis原是Apache的一个开源项目iBatis 2010碾开发团队转移到谷歌旗下改名为Mybatis Mybatis介绍 Mybatis是一个优秀的数据持久层框架(dao层 数据访问层 数据持久层) Mybatis是对jdbc进行封装,比见面jdbc这手动设置参数,手动映射结果的操作 Mybatis是将jdbc中的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023