Twitter Bootstrap Affix: Can't pin

Question

I am using the most recent version of Twitter Bootstrap and trying to implement Affix on a div on my site:

<div id="sectiontwo" class="affix-top" data-spy="affix" data-offset-top="1000">
<div class="row sectiontwo">
<div class="span4">
<hr>
<h4>Join Headline/h4>
<hr>
</div>
</div>
</div><!--#sectiontwo-->

But I'm receiving odd behavior:

• In Chrome:
  I cannot "pin" it. Instead, it scrolls through the page as I scroll.

• In Firefox:
  I also can't "pin" it but as it scrolls, it jumps and fixes itself to the bottom.

What I want it to do is to pin itself to the top of the window once the affix section is triggered. From my understanding, that's how it works on the Twitter Bootstrap docs site.

Answer 1

Fist of all, data-offset-top="1000" is the distance in pixels that the user will need to scroll before the affix plugin will kick in.

In your case the user would need to scroll 1000px before the affix plugin will change the display of your div.

Second, I believe the affix plugin will change the class of your div (after scrolling 1000px) from .affix-top to .affix

Since bootstrap has already set the class .affix to position: fixed all you need to do is add in the positioning in your css e.g. top: 40px;

Answer 2

I had the same problem and fixed it by removing the "data-offset-top"