Bootstrap滾動監聽（Scrollspy）插件詳解_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

Bootstrap滾動監聽（Scrollspy）插件詳解_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:03 PM

bootstrap外掛捲動監聽

滾動監聽（Scrollspy）插件，即自動更新導航插件，會根據捲軸的位置自動更新對應的導航目標。其基本的實作是隨著您的捲動，基於捲軸的位置會向導覽列添加 .active class。

如果您想要單獨引用該外掛程式的功能，那麼您需要引用 scrollspy.js。或者，如 Bootstrap 外掛程式概覽一章所提到，您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js。

一、用法
您可以在頂部導覽中新增滾動監聽行為：

1、透過 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>

2、透過 JavaScript：您可以透過 JavaScript 呼叫滾動監聽，選取要監聽的元素，然後呼叫 .scrollspy() 函數：
$('body').scrollspy({ target: '.navbar-example' })
二、滾動監聽
捲動監聽外掛程式是用來根據捲軸所處在的位置自動更新導覽項目，顯示導覽項目高亮顯示。

//基本实例
<nav id="nav" class="navbar navbar-default">
  <a href="#" class="navbar-brand">Web 开发</a>
  <ul class="nav navbar-nav">
    <li>
      <a href="#html5">HTML5</a>
    </li>
    <li>
      <a href="#bootstrap">Bootstrap</a>
    </li>
    <li class="dropdown">
      <a href="#" data-toggle="dropdown">JavaScript <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li>
          <a href="#jquery">jQuery</a>
        </li>
        <li>
          <a href="#yui">Yui</a>
        </li>
        <li>
          <a href="#extjs">Extjs</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

<div data-offset="0" data-target="#nav" data-spy="scroll" style="height: 200px; overflow: auto; position: relative;padding: 0 10px;">
  <h4 id="HTML">HTML5</h4>
  <p>
    标准通用标记语言下的一个应用 HTML 标准自 1999 年 12 月发布的 HTML4.01后，后继的 HTML5 和其它标准被束之高阁，为了推动 Web 标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group（Web 超文本应用技术工作组 -WHATWG） 的组织。WHATWG 致力于 Web 表单和应用程序，而 W3C（World Wide Web Consortium，万维网联盟） 专注于 XHTML2.0。在 2006 年，

    双方决定进行合作，来创建一个新版本的 HTML。
  </p>
  <h4 id="Bootstrap">Bootstrap</h4>
  <p>
    Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、 CSS、 JAVASCRIPT 的， 它简洁灵活， 使得 Web 开发更加快捷。 [1]它由 Twitter的设计师 Mark Otto 和 Jacob Thornton 合作开发，是一个 CSS/HTML 框架。Bootstrap提供了优雅的 HTML 和 CSS 规范，它即是由动态 CSS 语言 Less 写成。Bootstrap 一经推出后颇受欢迎，一直是 GitHub 上的热门开源项目，包括 NASA 的 MSNBC（微软全国广播公司）的 Breaking News 都使用了该项目。[2]国内一些移动开发者较为熟悉的框架，如 WeX5前端开源框架等，也是基于 Bootstrap 源码进行性能优化而来。[3]
  </p>
  <h4 id="jQuery">jQuery</h4>
  <p>
    JQuery 是继 prototype 之后又一个优秀的 Javascript 库。 它是轻量级的 js库 ，它兼容 CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+） ，jQuery2.0 及后续版本将不再支持 IE6/7/8 浏览器。jQuery 使用户能更方便地处理 HTML（标准通用标记语言下的一个应用） 、 events、 实现动画效果， 并且方便地为网站提供 AJAX交互。jQuery 还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。 jQuery 能够使用户的 html 页面保持代码和 html 内容分离， 也就是说， 不用再在 html 里面插入一堆 js 来调用命令了， 只需要定义 id 即可。
  </p>
  <h4 id="Yui">Yui</h4>
  <p>
    近几年随着 jQuery、Ext 以及 CSS3 的发展，以 Bootstrap 为代表的前端开发框架如雨后春笋般挤入视野， 可谓应接不暇。 不论是桌面浏览器端还是移动端都涌现出很多优秀的框架，极大丰富了开发素材，也方便了大家的开发。这些框架各有特点，本文对这些框架进行初步的介绍与比较， 希望能够为大家选择框架提供一点帮助， 也为后续详细研究这些框架的抛砖引玉。
  </p>
  <h4 id="Extjs">Extjs</h4>
  <p>
    ExtJS 可以用来开发 RIA 也即富客户端的 AJAX 应用，是一个用 javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端 ajax 框架。因此，可以把 ExtJS 用在.Net、Java、Php 等各种开发语言开发的应用中。ExtJs 最开始基于 YUI 技术，由开发人员 JackSlocum 开发，通过参考 JavaSwing 等机制来组织可视化组件，无论从 UI 界面上 CSS 样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript 客户端技术的精品。
  </p>
</div>

這裡有兩個重要的屬性，如下圖：

PS：在一個選單和一個容易的時候，data-target 不設定也可以穩定實現滾動監聽高亮。但多個導航時，你不關聯其中一個，會導致錯誤，所以，一般要加上去。

如果使用 JavaScript 腳本方式，可以去掉 data-*，使用腳本屬性定義： offset、 spy和 target。具體方法如下：

//使用脚本方式定义属性

$('#content').scrollspy({
  offset : 0,
  target : '#nav',
});

滾動監聽還有一個切換到新條目的事件。

//事件綁定在導航上

$('#nav').on('activate.bs.scrollspy', function() {
alert('新條目啟動後觸發此事件！');
});
滾動監聽還有一個更新容器 DOM 的方法。

//HTML 部分

<section class="sec">
  <h4 id="HTML-a-href-onclick-removeSec-this-删除此项-a">HTML5 <a href="#" onclick="removeSec(this)">删除此项</a></h4>
  <p>
    ...
  </p>
</section>

//刪除內容時，刷新一下 DOM，避免導航監聽錯位

function removeSec(e) {
  $(e).parents('.sec').remove();
  $('#content').scrollspy('refresh');
}

注意：這個方法必須使用 data-*聲明式。

以上就是本文的全部內容，希望對大家的學習有所幫助。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python vs. JavaScript：開發人員的比較分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要區別在於類型系統和應用場景。 1.Python使用動態類型，適合科學計算和數據分析。 2.JavaScript採用弱類型，廣泛用於前端和全棧開發。兩者在異步編程和性能優化上各有優勢，選擇時應根據項目需求決定。

Python vs. JavaScript：選擇合適的工具May 08, 2025 am 12:10 AM

選擇Python還是JavaScript取決於項目類型：1)數據科學和自動化任務選擇Python；2)前端和全棧開發選擇JavaScript。 Python因其在數據處理和自動化方面的強大庫而備受青睞，而JavaScript則因其在網頁交互和全棧開發中的優勢而不可或缺。

Python和JavaScript：了解每個的優勢May 06, 2025 am 12:15 AM

Python和JavaScript各有優勢，選擇取決於項目需求和個人偏好。 1.Python易學，語法簡潔，適用於數據科學和後端開發，但執行速度較慢。 2.JavaScript在前端開發中無處不在，異步編程能力強，Node.js使其適用於全棧開發，但語法可能複雜且易出錯。

JavaScript的核心：它是在C還是C上構建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1）JavascriptwasdesignedAsignedAsalightWeight，drackendedlanguageforwebbrowsers.2）Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers，典型地，替代品。

JavaScript應用程序：從前端到後端May 04, 2025 am 12:12 AM

JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗，後端通過Node.js處理服務器任務。 1.前端示例：改變網頁文本內容。 2.後端示例：創建Node.js服務器。

Python vs. JavaScript：您應該學到哪種語言？May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統：1)職業發展：Python適合數據科學和後端開發，JavaScript適合前端和全棧開發。 2)學習曲線：Python語法簡潔，適合初學者；JavaScript語法靈活。 3)生態系統：Python有豐富的科學計算庫，JavaScript有強大的前端框架。

JavaScript框架：為現代網絡開發提供動力May 02, 2025 am 12:04 AM

JavaScript框架的強大之處在於簡化開發、提升用戶體驗和應用性能。選擇框架時應考慮：1.項目規模和復雜度，2.團隊經驗，3.生態系統和社區支持。

JavaScript，C和瀏覽器之間的關係May 01, 2025 am 12:06 AM

引言我知道你可能會覺得奇怪，JavaScript、C 和瀏覽器之間到底有什麼關係？它們之間看似毫無關聯，但實際上，它們在現代網絡開發中扮演著非常重要的角色。今天我們就來深入探討一下這三者之間的緊密聯繫。通過這篇文章，你將了解到JavaScript如何在瀏覽器中運行，C 在瀏覽器引擎中的作用，以及它們如何共同推動網頁的渲染和交互。 JavaScript與瀏覽器的關係我們都知道，JavaScript是前端開發的核心語言，它直接在瀏覽器中運行，讓網頁變得生動有趣。你是否曾經想過，為什麼JavaScr

See all articles