Bootstrap外掛（二）——滾動監聽（scrollspy.js）

滾動監聽就不細緻的將他的方法屬性或者事件之類的了，我們實現一個根據滑動位置動態改變導航選中選項和根據不同的導航選單選中跳轉到相應的位置的案例
先上效果圖：

接下來是實現程式碼，程式碼的實現和關鍵點在程式碼中有註釋 1

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>元件</title>

    <!--引入bootstrap樣式檔案 
-->

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!--引入jq（必須在bootstrap.min.js檔案之前）-->

    <script type="application/javascript" src="js/jquery-3.2.0.js"></script>

    <!--引入bootstrap js-->

    < 
script type="application/javascript" src="js/bootstrap.min.js"></script>

12 13

    <style type="text/css">

        .jumbotron{

            padding-top: 30px;

            padding-bottom: 30px;

        .panel 
{

            background-color: #000;

            color:white;

22 23

        body{

            position: relative;

26 27

    </style>

</head>

29 30

<!--

    滾動的監聽大多數用來實現選單位置與頁面scroll內容的聯動，將滾動位置與選單項繫結

    滾動到某一個位置顯示選中選單的某一項

33 34

    實現頁面與導航的聯動的步驟：

        1.設定監聽的控制元件為相對定位position: relative; 這裡設定的是body

        2.設定data-spy="scroll" data-target="#fixed-nav" data-target指定導航控制元件

        3.將導航的href與對應滑動到的位置的元素繫結起來 <a href="#nav-two">導航二</a> #nav-two就是我們點選這個導航後

            跳轉到的位置

-->

40 41 42

<body style="margin: 60px" data-spy="scroll" data-target="#fixed-nav">

43 44

<!--固定頂部導航-->

<div id="fixed-nav" class="navbar navbar-default navbar-fixed-top">

    <div class="container-fluid">

47 48 49

        <!--頭部品牌-->

        <div class="navbar-header" style="margin-left: 60px">

            <a class="navbar-brand" href="#">

                <img src="img/img.jpg" width="30px" height="30px">

            </a>

        </div>

55 56

        <!--導航主體內容-->

        <div class="collapse navbar-collapse" id="navbar-collapse-1">

58 59

            <ul class="nav navbar-nav">

60 61

                <li role="presentation" class="active"><a href="#nav-one">導航一</a> </li>

62 63

                <li role="presentation"><a href="#nav-two">導航二</a></li>

64 65

                <li role="presentation"><a href="#nav-three">導航三</a></li>

            </ul>

        </div>

    </div>

</div>

70 71

    <div class="">

72 73

        <div id="nav-one" class="panel panel-success">

            <div class="panel-body">

                導航一部分

            </div>

        </div>

        <div class="jumbotron">

            <div class="container">

80 81

                <div class="col-sm-2 col-lg-2">

82 83

                    <a href="#" class="thumbnail">

                        <img src="img/pic1.jpeg" width="100%">

                    </a>

                </div>

Bootstrap外掛（二）——滾動監聽（scrollspy.js）

Bootstrap 下拉選單和滾動監聽（Scrollspy）外掛

一、下拉選單外掛切換下拉選單（Dropdown）外掛的隱藏內容：（1）通過 data 屬性：向連結或按鈕新增 data-toggle="dropdown" 來切換下拉選單：<div class="dropdown"> <a data-toggle="

淺談對Bootstrap的看法之三（提示框和彈出框、滾動監聽、小工具）

1.提示框和彈出框相關說明：提示框和彈出框效果類似。提示框：通過向元素新增 data-toggle="tooltip" 來建立提示框，<a href="#" data-toggle="tooltip" title="我是提示內容!">滑鼠移動到我這</a&g

滾動監聽（上面導航下面錨點）

就是點選導航一個欄目，會顯示對應的內容基本使用方法 ** 讓欄目有選中的效果？ ** data-spy=“scroll” style=“position: relative” ** 當導航欄和內容框的距離達到多少時，導航欄選中效果會發生切換？ **

bootstrap(下拉選單與滾動監聽)

下拉選單（Dropdown） ☑ LESS版本：對應的原始檔dropdowns.less <h3>示例1</h3> <div class="navbar navbar-default" id="navmenu"&g

Bootstrap -- 外掛: 模態框、滾動監聽、標籤頁

Bootstrap -- 外掛: 模態框、滾動監聽、標籤頁 1. 模態框（Modal）: 覆蓋在父窗體上的子窗體。使用模態框： <!DOCTYPE html> <html> <head> <meta http-equiv="Content

Bootstrap的js外掛之滾動監聽(scrollspy)

data-spy="scroll"——向您想要監聽的元素（通常是 body）新增滾動監聽事件。 data-target=".navbar"——指明導航條為監聽目標； data-offset="70"——計算滾動位置時相對於頂部的偏移量（畫素數）; <!DOCTY

bootstrap滾動監聽外掛Scrollspy橫向和縱向例項對比

bootstrap滾動監聽（Scrollspy）外掛，即自動更新導航外掛，會根據滾動條的位置自動更新對應的導航目標。1.如何建立滾動監聽首先Body的position需要設定為relative.<body data-spy="scroll" data-target=".

Bootstrap 滾動監聽外掛Scrollspy 的事件

事件Bootstrap滾動監聽外掛Scrollspy提供了一個事件 activate，每當一個新的導航專案被啟用時，就會觸發該事件，並自動為導航條的相應選單項添加了一個 .active 類，讓它高亮顯示。關於作者歪脖先生，十五年以上軟體開發經驗，酷愛Web開發，精通 HTML

Bootstrap滾動監聽外掛

滾動監聽外掛，即自動更新導航外掛，會根據滾動條的位置自動更新對應的導航目標。其基本實現是隨著滾動，基於滾動條的位置嚮導航欄新增.active。 1.用法（1）通過data屬性，向您想要監聽的元素新

scrollspy（滾動監聽）的使用方法

原始碼檔案：Scrollspy.js實現功能1、當滾動區域內設定的hashkey距離頂點到有效位置時，就關聯設定其導航上的指定項2、使用滾動監聽的話，導航欄必須採用 class="nav"的nav元件才可以。導航必須是 .nav > li > a 結構，並且a上h

Bootstrap學習筆記--外掛之Carousel外掛輪播圖片，模態外掛，提示外掛，滾動監聽外掛，Affix外掛

輪播外掛： Carousel外掛：輪播外掛。是一個通過元素迴圈的元件，如旋轉木馬（幻燈片）外掛可以單獨包含（使用Bootstrap“carousel.js”檔案），或者一次全部使用（使用“bootstrap.js”或“bootstrap.min.

【學習筆記】Bootstrap外掛滾動監聽+彈出框+選項卡

--滾動監聽依賴導航元件步驟：1.寫一個導航元件2.data-target="#test"執行滾動監聽的目標 data-spy="scroll" 向想要監聽的元素新增滾動監聽 <nav id="test" class="navbar navbar-defa

EventFiringWebDriver網頁事件監聽（一）

sna system function tac hcl 通過 events att 腳本執行 Selenium提供了很多的event listening functions來跟蹤腳本執行過程中的events. How it works? 在註冊了listener的webDr

手機影音第六天自定義播放器頁面的實現（按鈕暫時未監聽）

手機影音第六天自定義播放器布局以及橫豎屏切換播放器時的問題解決目前進度的項目源代碼托管在裏碼雲上，地址如下： https://git.oschina.net/joy_yuan/MobilePlayer 感興趣的可以去下載看看，多多支持

Tomcat（介紹，JDK安裝，Tomcat安裝，配置Tomcat監聽80端口）

必須 bin rgb 命令 mct local bak $path 系統一、Tomcat介紹目前有很多網站是用Java編寫的，所以解析Java程序就必須有相關的軟件來完成，Tomcat就是其中之一Tomcat是Apache軟件基金會，的Jakarta項目中的一個核心項目，

spring 自定義事件發布及監聽（簡單實例）

講解 new 繼承概念接口處理啟動 lca 事件對象前言： Spring的AppilcaitionContext能夠發布事件和註冊相對應的事件監聽器，因此，它有一套完整的事件發布和監聽機制。流程分析：在一個完整的事件體系中，除了事件和監聽器以外，還應該有3個概

Bootstrap 下拉菜單和滾動監聽插件

bootstrap 下拉菜單和滾動監聽插件一．下拉菜單常規使用中，和組件方法一樣，代碼如下： //聲明式用法 <div class="dropdown"> <button class="btn btn-primary" data-toggle="dropdown"> 下拉菜

Bootstrap 學習筆記8 下拉菜單滾動監聽

bsp http drop htm bar 下拉 overflow inf flow 代碼部分： <nav class="navbar navbar-default"> <a href="#" class="navba

觀察者模式下es6的實現（自定義可監聽事件）

定義觀察者模式：又叫釋出訂閱模式，多個觀察者可以實時監聽一個主題物件，而javascript中最常用的實現方式是事件觸發機制。 es6實現：要知道需要有什麼東西，類和建構函式是es6中基本的物件結構 class BaseEvent { 　　constructor() {} } 首先類中要能儲

Bootstrap外掛（二）——滾動監聽（scrollspy.js）

相關推薦