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.

You don't need both, you can only use HTML markup. But you need to put ... and
... — Vincent Decaux, May 25 '14 at 09:02

score 0 · Answer 1 · answered May 25 '14 at 09:09

0

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

answered May 25 '14 at 09:09

Vincent Decaux

9,857
6
56
84

I won't do your job ! Create your fiddle and try my code. Did you allready try it ? – Vincent Decaux May 25 '14 at 09:56
Yes i tried it but the affix goes to left and when i pass to my h1 it not change the class to active. Check this fiddle: http://jsfiddle.net/33p6D/ I want to float affix to the right not the left, and add a class active to the current li when it pass the title, for example if i'm over the title 2, add class active to the title 2, like boostrap official affix. – PCM May 25 '14 at 11:21

score 0 · Accepted Answer · answered May 26 '14 at 14:38

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.

Implementing Bootstrap Affix

...

2 Answers2