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

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

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

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

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

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

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

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

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

ScrollSpy を使用する場合は、

タグを使用する必要があり、
• の下に タグが必要です。 ;。

  注: さらに、

  タグを別のコンテナ (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 リンクには、home のような解決可能な ID ターゲットが必要です。 " > などの対応するタグが必要です。コンテンツが タグまでスクロールすると、対応する

  • が表示されます。 が自動的に選択されます。
  -- 実際、Web 開発を行った友人はこれを知っています。以前のバージョンの HTML では、

  anchor タグ は通常 メソッドを使用していましたが、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; を使用する必要があります。 以外の要素をスクロールスパイするときは、必ず高さを設定し、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" を追加します (最も一般的には、これは の親要素の ID またはクラスを使用して data-target 属性を追加します。 --- data-spy="scroll" 属性と data-target 属性を追加する必要があります。スクロールするコンテンツのラベル
  data -spy 属性は監視対象の要素を指定し、data-target 属性はスクロール中に制御する必要があるナビゲーションの強調表示を指定します

  以下の初期化ソースコードをもう一度見てください。赤で表示されている this.options.target の値は、スクロールするコンテンツ要素の data-target の値と同じです。これを見て、.nav コンポーネントを定義するときに .nav を配置する必要があると考えたかもしれません。別のコンテナー (div など) にあり、コンテナーには id 属性が必要です (データターゲットと同じ値をここで設定する必要があります)。

  function ScrollSpy(element, options) {    this.$body          = $(document.body)    this.$scrollElement = $(element).is(document.body) ? $(window) : $(element)    this.options        = $.extend({}, ScrollSpy.DEFAULTS, options)    this.selector       = (this.options.target || '') + ' .nav li > a'    this.offsets        = []    this.targets        = []    this.activeTarget   = null    this.scrollHeight   = 0    this.$scrollElement.on('scroll.bs.scrollspy', $.proxy(this.process, this))    this.refresh()    this.process()  }

  5.

  CSSにposition:relative;を追加した後、JavaScript経由でscrollspyを呼び出します:

  　　　　$('yourTag').scrollspy({ target: 'nav-parent-div-id' })<br />-- yourTag 就是要承载滚动内容的元素的ID，nav-parent-div-id 就是.nav元素的父元素的id（也就是data-target的值）<br /><br /><br /><strong>乱七八糟写了一堆，下面总结一个简单的几个步骤：</strong><br /><br />

  1. タグ

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

  3.

  を追加します。 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' });});