Implementing Bootstrap Affix

Question

I have a page with h1 and content in <p> tag, like this:

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

I want to implement Bootstrap Affix float on the right, like Bootstrap official page: http://getbootstrap.com/javascript/#affix

But i don't know how, i don't understand the instructions, i need to put this:

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

And this:

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

How can i do?

Thanks.

Answer 1

You might want to try an Affix menu generator called Appizy. You just have to create spreadsheet with your title (h1) in a column and the content (p) in a second column, Appizy creates the good tags and javascript for you. Here you have a tutorial video.

Answer 2

As I have said, you can only use HTML markup :

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

And for your content :

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

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