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 float，如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。这里有a tutorial video.

实现Bootstrap Affix

2 个答案: