4

I want to use the affix plugin of bootstrap on my sidebar. However, as my site is responsive, it's always jumping on some dimensions, and I can't get it working properly. I tried the solutions listed here: How to use the new affix plugin in twitter's bootstrap 2.1.0? but it's not just working.

Here's a demo

I know how I could do this on a site with fixed width, but as my site is responsive and so is bootstrap docs, and as it works perfectly there, how do I achieve the same effect?

As this isn't probably ever going to work

.affix {
    position: fixed; 
    top: 20px; 
    right: 10%;
}
Community
  • 1
  • 1

1 Answers1

1

When I've used this, my .affix class just has position:fixed, nothing else. The top position at which the affix element becomes affixed can be set in the affix() method using the offset option, e.g.

$("#nav_id").affix({
    offset: 400
});
danwellman
  • 9,068
  • 8
  • 60
  • 88
  • so in other words, don't set the `top` or `right` styles in your CSS, set the `top` using the `offset` option, and don't worry about setting the `right` style. See if that helps. And your demo link just goes to a blank page btw... – danwellman Nov 30 '12 at 11:37
  • Well, now it wont scroll on the page. –  Nov 30 '12 at 12:04
  • Then something else is wrong. Removing your CSS would not stop Bootstrap's JavaScript from working. Sounds like affix was not even being initialised in the first place and it was just your CSS making the element fixed. – danwellman Nov 30 '12 at 12:46
  • Ok, so was the affix class being added to the element? If so then affix was working. But you still shouldn't need to set `top` or `right` properties in the CSS. I have affix working on a site right now, and all my `.affix` CSS class has in it is `position:fixed` – danwellman Nov 30 '12 at 12:57
  • The affix class was added, but it was always jumping when it activated, if I managed to get it working properly on one resolution, then it was horrible on another. –  Nov 30 '12 at 13:04