javascript - 实现引导词缀

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

您可能想尝试一个名为Appizy的 Affix 菜单生成器。您只需要在列中创建标题 (h1) 并在第二列中包含内容 (p) 的电子表格，Appizy 会为您创建好的标签和 javascript。这里有一个教程视频。

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>
...