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

by

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.

More Related Contents:

  1. Bootstrap NavBar with left, center or right aligned items
  2. Change navbar color in Twitter Bootstrap
  3. Change bootstrap navbar collapse breakpoint without using LESS
  4. Center content in responsive bootstrap navbar
  5. Center an element in Bootstrap Navbar
  6. Bootstrap 3 Navbar with Logo
  7. Bootstrap 4 – Navbar items outside the collapse
  8. Mysterious whitespace in between Bootstrap2 Navbar and row underneath
  9. How to make a Bootstrap 4 full width dropdown in Navbar?
  10. Bootstrap Navbar list items/links not showing
  11. How to change Bootstrap navbar collapse breakpoint
  12. Bootstrap 3 fluid grid layout issues?
  13. How to change the bootstrap primary color?
  14. Why did Bootstrap 3 switch to box-sizing: border-box?
  15. Twitter Bootstrap Multilevel Dropdown Menu
  16. How can I change the Bootstrap 4 navbar button icon color?
  17. Bootstrap with different order on mobile version
  18. Change the order of col-*-12 columns in Bootstrap using push/pull
  19. Bootstrap 3 – Use more than 12 columns in a row
  20. Scrollable Menu with Bootstrap – Menu expanding its container when it should not
  21. Changing the width of Bootstrap popover
  22. How to change btn color in Bootstrap
  23. What does an “&” before a pseudo element in CSS mean?
  24. Bootstrap Center Navbar Items
  25. How to use vertical align in bootstrap
  26. How to stick table header(thead) on top while scrolling down the table rows with fixed header(navbar) in bootstrap 3?
  27. Remove border radius from Select tag in bootstrap 3
  28. up/down arrow key issue with typeahead control (angular bootstrap UI)
  29. Custom CSS being overridden by Bootstrap CSS
  30. Turning off Twitter Bootstrap Navbar Transition animation

Leave a Comment