实现引导词缀

Question

我在<p>标签中有一个带有h1和内容的页面，如下所示：

<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

您可能想试试名为Appizy 的词缀菜单生成器。您只需要在列中创建标题 (h1) 并在第二列中包含内容 (p) 的电子表格，Appizy 会为您创建好的标签和 javascript。这里有a tutorial video.

Answer 2

正如我所说，你只能使用 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>
...