Bootstrap滾動監聽外掛

阿新 • • 發佈：2019-01-10

滾動監聽外掛，即自動更新導航外掛，會根據滾動條的位置自動更新對應的導航目標。其基本實現是隨著滾動，基於滾動條的位置嚮導航欄新增.active。
1.用法
（1）通過data屬性，向您想要監聽的元素新增data-spy=“scroll”
（2）通過JavaScript，呼叫.scrollspy()函式

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

2.例子

<style>
  body {
      position: relative; 
  }

 #html{height:400px; background-color 
:#3333CC;}
 #css{height:400px; background-color:gray;}
 #jquery{height:400px; background-color:#3333CC;}
 #ajax{height:400px; background-color:gray;}
  </style>
</head>
<body data-spy="scroll" data-target=".navbar" >
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class 
="navbar-header"> <a class="navbar-brand" href="#">劉小妞的部落格</a> </div>
  <div class="collapse navbar-collapse" id="myNavbar">
    <ul class="nav navbar-nav">
      <li><a href="#html">html</a></li>
      <li><a href="#css">css</a></li 
>
      <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> javascript <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#jquery">jquery</a></li>
          <li><a href="#ajax">ajax</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <!--導航欄中每個塊-->
</nav>
<div id="html">
  <h1>html</h1>
  <p>html部分</p>
</div>
<div id="css">
  <h1>css</h1>
  <p> css部分</p>
</div>
<div id="jquery">
  <h1>jquery</h1>
  <p>jquery部分</p>
</div>
<div id="ajax">
  <h1>ajax</h1>
  <p>ajax部分</p>
</div>

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屬性，向您想要監聽的元素新

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

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

Bootstrap 滾動監聽(Scrollspy)

body { position: relative; } </style></head><body data-spy="scroll" data-target=".navbar" data-offset="50"><

bootstrap滾動監聽

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&g

Bootstrap 滾動監聽Scrollspy 呼叫方式

呼叫方式1、data屬性呼叫只需給監聽物件定義 data-spy="scroll" 屬性及 data-target 屬性，就可以啟用滾動監聽外掛。data-target 屬性的值是一個選擇器，它指向擁有滾動監聽功能的頁面元素。本例項中，擁有滾動監聽功能的頁面元素為 id="n

bootstrap滾動監聽示例

<!-- Bootstrap 核心 CSS 檔案 ,其實只應用了一部分樣式, 開發中使用時把不必要的樣式去掉,否則會對專案整體樣式產生影響 , 案例下載 http://download.csdn.net/detail/u011411069/9080293

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

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

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

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

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

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

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

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

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

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

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

bootstrap的滾動監聽

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>bootstrap中滾動導航監聽主要的就是在

Bootstrap3.0學習第二十輪(JavaScript外掛——滾動監聽)

前言本文主要來學習一下JavaScript外掛--下拉選單。滾動監聽案例滾動監聽外掛可以根據滾動條的位置自動更新所對應的導航標記。你可以試試滾動這個頁面，看看左側導航的變化。先把實現的程式碼上了，你可以通過測試程式碼先來看看效果。 View Code 然後執行後，在內容下，也就是有滾動條哪裡滾

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

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

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

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

bootstrap 3 navrbar實現置頂並滾動監聽

Bootstrap滾動監聽外掛

相關推薦