How to Use the New Affix Plugin in Twitter's Bootstrap 2.1.0

How to use the new affix plugin in twitter's bootstrap 2.1.0?

I was having a similar problem, and I believe I found an improved solution.

Don't bother specifying data-offset-top in your HTML. Instead, specify it when you call .affix():

$('#nav').affix({
    offset: { top: $('#nav').offset().top }
});​

The advantage here is that you can change the layout of your site without needing to update the data-offset-top attribute. Since this uses the actual computed position of the element, it also prevents inconsistencies with browsers that render the element at a slightly different position.

---

You will still need to clamp the element to the top with CSS. Furthermore, I had to set width: 100% on the nav element since .nav elements with position: fixed misbehave for some reason:

#nav.affix {
    position: fixed;
    top: 0px;
    width: 100%;
}

---

One last thing: When an affixed element becomes fixed, its element no longer takes up space on the page, resulting in the elements below it to "jump". To prevent this ugliness, I wrap the navbar in a div whose height I set to be equal to the navbar at runtime:

<div id="nav-wrapper">
    <div id="nav" class="navbar">
        <!-- ... -->
    </div>
</div>

.

$('#nav-wrapper').height($("#nav").height());

---

Here's the obligatory jsFiddle to see it in action.

How do I affix top my navbar with Twitter Bootstrap?

There are few things to correct. See fixed jsfiddle.

1. Affix is implemented in the Bootstrap as JavaScript code using jQuery and you did not include neither BS's JS nor jQuery
2. To turn on affix for the element, according to official documentation, use data-spy="affix", not the class="affix". Why did you do that? Classes affix and affix-top serve a different purpose - they tell you the state of the affix at the time. If at the moment your element is fixed the class is affix, if it is scrollable BS changes the class to affix-top.
3. You have to tell BS when you want the element to be fixed. The distance in pixels (how much you have to scroll) is set with the attribute data-offset-top. Also specify in CSS how the nav should look like when fixed. If it is binded to the top (with no space between the window border and the element) then .affix { top:0; } will do it.

Twitter Bootstrap - Responsive affix

Bootstrap uses an extra CSS file for their docs that overrides the default behavior of some elements.

Specifically, on line 917, they change the position of the affixed sidebar (as part of a media query for <767px width) to static:

.bs-docs-sidenav.affix {
  position: static;
  width: auto;
  top: 0;
}

They have several additional custom styles applied to the affixed sidebar; you can view them by using Chrome Web Inspector/Firebug on a phone-sized window.

Finding the bootstrap affix plugin js only file

You can actually customize what you want your bootstrap package to contain using http://getbootstrap.com/customize/ or you can just find the code for #affix within bootstrap and extract it to a separate JS file your self. Just beware some JS libraries are dependent on others.

---

Related Topics