ブートタップ スクロール監視_html/css_WEB-ITnose

---最初にソースコード付きの公式Webサイトの手順を紹介します

---次にスクロールモニタリングの使用手順をまとめます

---最後に簡単な例を示します

---重要なポイント: 全体が少し散らばっていて乱雑なので、心と目に負担がかかります、笑

--------- ---------------------------------------------------- ------------------------------------

1. 現在、Scrollspy を使用する必要があります。アクティブなリンクを適切に強調表示するための Bootstrap nav コンポーネント。

---- スクロール監視を使用する場合、ナビゲーション バーは class="nav" の nav コンポーネントを使用する必要があります:

以下はソース コードのセクションです、赤でマークされた部分がそれを証明できます この点:

ScrollSpy を使用する場合は、73a72cdc17fc2b29bb35d64b4687fa7c タグを使用する必要があり、25edfb22a4f469ecb59f1190150159c6 の下に 3499910bf9dac5ae3c52d5ede7383485 タグが必要です。 ;。

注: さらに、73a72cdc17fc2b29bb35d64b4687fa7c タグを別のコンテナ (div など) に配置し、親コンテナに id 属性を追加する必要があります (これについてはセクション 4 で説明します)

 1 function ScrollSpy(element, options) { 2     this.$body          = $(document.body) 3     this.$scrollElement = $(element).is(document.body) ? $(window) : $(element) 4     this.options        = $.extend({}, ScrollSpy.DEFAULTS, options) 5     this.selector       = (this.options.target || '') + ' .nav li > a' 6     this.offsets        = [] 7     this.targets        = [] 8     this.activeTarget   = null 9     this.scrollHeight   = 010 11     this.$scrollElement.on('scroll.bs.scrollspy', $.proxy(this.process, this))12     this.refresh()13     this.process()14   }

2. Navbar リンクには、bdbe26872a334f3b7c83b8ae7c50ac47home5db79b134e9f6b82c0b36e0489ee08ed のような解決可能な ID ターゲットが必要です。 " > 5ffad543fdd9d71340ebb3c2c670dbf35db79b134e9f6b82c0b36e0489ee08ed などの対応するタグが必要です。コンテンツが 5ffad543fdd9d71340ebb3c2c670dbf3 タグまでスクロールすると、対応する 25edfb22a4f469ecb59f1190150159c6 が表示されます。 2dac5b3c1a71acb02bf03dd588b09a33 が自動的に選択されます。

-- 実際、Web 開発を行った友人はこれを知っています。以前のバージョンの HTML では、

anchor タグ は通常 bc8f08fb0993388c993dc7bf88c0ef43 メソッドを使用していましたが、HTML5 の anchor タグは

です。 name 属性は放棄され、代わりに id 属性が使用されます

 ScrollSpy.prototype.activate = function (target) {    this.activeTarget = target    this.clear()    var selector = this.selector +      '[data-target="' + target + '"],' +      this.selector + '[href="' + target + '"]'    var active = $(selector)      .parents('li')      .addClass('active')    if (active.parent('.dropdown-menu').length) {      active = active        .closest('li.dropdown')        .addClass('active')    }    active.trigger('activate.bs.scrollspy')  }

3. 実装方法に関係なく、scrollspy はスパイしている要素に対してposition:relative; を使用する必要があります。 6c04bd5ca3fcae76e30b72ad730ca86d 以外の要素をスクロールスパイするときは、必ず高さを設定し、overflow-y:scroll; を適用してください。

--- Body のスクロールを監視する場合は、 body を指定する必要があります Position:relative スタイルを追加します

--- 監視対象が Body ではなく、他の要素である場合 [この方法が一般的であるようです]、position:relative;height:500px; の 3 つのスタイルを追加する必要があります。 overflow-y:scroll ;

ScrollSpy.prototype.refresh = function () {    var that          = this    var offsetMethod  = 'offset'    var offsetBase    = 0    this.offsets      = []    this.targets      = []    this.scrollHeight = this.getScrollHeight()    if (!$.isWindow(this.$scrollElement[0])) {      offsetMethod = 'position'      offsetBase   = this.$scrollElement.scrollTop()    }

4.

トップバー ナビゲーションにスクロールスパイ動作を簡単に追加するには、スパイしたい要素に data-spy="scroll" を追加します (最も一般的には、これは 2df786e30def7f158043b2fa80709b47

2. タグ内に追加します。 nav コンポーネントを追加し、li->a に href="#tag" 属性を追加します

3. d111d6fe33c5d1eadcb1b41531cb3333 を追加します。 4. スタイルを追加 #content{height:500px;overflow-y:scroll;opsition:relative;}

5. スクリプトを追加 $('#content').scrollspy({target:'scrollSpyID'});

最後に、ちょっと栗:

<style type="text/css">        #body {            position: relative;            height: 500px;            overflow-y: scroll;        }    </style>

 <div id="sc">        <ul class="nav nav-pills">            <li class="active">                <a href="#A">第一段</a>            </li>            <li>                <a href="#B">第二段</a>            </li>            <li>                <a href="#C">第三段</a>            </li>        </ul>    </div>

<div id="body" class="container-fluid" data-spy="scroll" data-target="#sc">　　<a id="A">第一段</a><br />　　　　<!-- 这里要有很多内容，至少要保证可以滚动 -->　　<a id="A">第二段</a><br />　　　　<!-- 这里要有很多内容，至少要保证可以滚动 -->　　<a id="A">第三段</a><br />　　　　<!-- 这里要有很多内容，至少要保证可以滚动 --></div>

$(function () {    $('#body').scrollspy({ target: '#sc' });});