實施Bootstrap詞綴

Question

我有一個帶有h1和<p>標記中的內容的頁面，如下所示：

<h1>Content1</h1>
<p>Blablablalbal</p>

<h1>Content2</h1>
<p>Blablablalbal</p>

<h1>Content3</h1>
<p>Blablablalbal</p>

<h1>Content4</h1>
<p>Blablablalbal</p>

<h1>Content5</h1>
<p>Blablablalbal</p>

我想在右側實現Bootstrap Affix浮動，例如Bootstrap官方頁面： http ： //getbootstrap.com/javascript/#affix

但是我不知道怎么做，我不理解指示，我需要這樣：

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
  ...
</div>

和這個：

$('#my-affix').affix({
    offset: {
      top: 100
    , bottom: function () {
        return (this.bottom = $('.footer').outerHeight(true))
      }
    }
  })

我能怎么做？

謝謝。

Answer 1

正如我所說的，您只能使用HTML標記：

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
  <ul class="nav">
    <li><a href="#title-1">Title 1</a></li>
    <li><a href="#title-2">Title 2</a></li>
    ....
  </ul>
</div>

並為您的內容：

<h1 id="title-1">Content1</h1>
<p>Blablablalbal</p>

<h1 id="title-2">Content2</h1>
<p>Blablablalbal</p>
...

Answer 2

您可能想要嘗試一個名為Appizy的Affix菜單生成器。 您只需要創建一個電子表格，其中標題（h1）放在一欄中，內容（p）放在第二欄中，Appizy會為您創建好的標簽和javascript。 在這里，您有一個教學視頻。