Bootstrap Scrollspy源碼學(xué)習(xí)
更新時間：2017年03月02日 09:04:10 作者：alexZhangkai
這篇文章主要介紹了Bootstrap Scrollspy源碼學(xué)習(xí)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Bootstrap Scrollspy插件的具體代碼，供大家參考，具體內(nèi)容如下
導(dǎo)航欄Scrollspy例子
<!-- The scrollable area --> <body data-spy="scroll" data-target=".navbar" data-offset="50"> <!-- The navbar - The <a> elements are 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" rel="external nofollow" rel="external nofollow" >Section 1</a></li> ... </nav> <!-- 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> ... </body>
垂直Scrollspy例子
<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" rel="external nofollow" rel="external nofollow" >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>
Scrollspy的使用
使用Scrollspy只需在對應(yīng)的HTML元素里添加幾個關(guān)鍵的屬性：
- data-spy=”scroll”
添加到需要滾動的元素中，比如最常見的body元素，或者container。
- data-target=”selector”
添加到需要滾動的元素中，selector指示的是控制滾動的元素比如”.navbar”, “#myScrollspy”。
- <a href=”#section”>section</a>
在控制滾動的元素中用link鏈接到對應(yīng)的位置。注意鏈接的id要跟對應(yīng)位置元素的id相匹配。例如，<div id=”section1”>與<a href=”#seciton1”。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
javascript innerHTML、outerHTML、innerText、outerText的區(qū)別
這篇文章主要介紹了javascript innerHTML、outerHTML、innerText、outerText的區(qū)別,本文講解了它們的功能、使用實例、和不同之處,需要的朋友可以參考下2008-11-11
Bootstrap modal 多彈窗之疊加關(guān)閉陰影遮罩問題的解決方法
這里也會遇到一次性關(guān)閉所有modal引起陰影遮罩的問題，也就是所有modal都關(guān)閉了，但是主頁面仍然被陰影遮罩。下面通過本文給大家分享解決方案，需要的朋友參考下吧2017-02-02
小議Function.apply() 之一------(函數(shù)的劫持與對象的復(fù)制)
小議Function.apply() 之一------(函數(shù)的劫持與對象的復(fù)制)...2006-11-11
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡單搜索功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
詳解javascript立即執(zhí)行函數(shù)表達(dá)式IIFE
本文主要介紹了javascript立即執(zhí)行函數(shù)表達(dá)式IIFE的相關(guān)知識。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
今天小編就為大家分享一篇layer 關(guān)閉指定彈出層的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)簡易留言板特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
這篇文章主要匯總介紹了JavaScript實現(xiàn)添加、查找、刪除元素的方法，十分的簡單實用，有需要的小伙伴可以參考下。2015-07-07
下面小編就為大家?guī)硪黄约悍庋b的一個簡單的倒計時功能實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
這篇文章主要介紹了Three.js的使用及繪制基礎(chǔ)3D圖形的相關(guān)資料，文中介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用three.js具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-04-04