2

I am using AngularJS 1.2 and Bootstrap 2.3, although I think it is irrelevant that Angular is involved since this is just jQuery. I want to be able to turn the affix on and off for a particular element. I have multiple elements on my page using affix so I can't just disable all instances of the plugin on the page. Also, my problem is unrelated to screen sizes so css is not possible.

For an element for which I have added affix to:

$(element).affix();

Things I have tried that I read about online/stackoverflow to remove the affix, but have been unsuccessful:

$(element).off('.affix');

$(element).removeData('affix').removeClass('affix affix-top affix-bottom');

Is it possible to just remove the affix aspect of this element?

Any help would be great!

changus
  • 763
  • 2
  • 10
  • 25

2 Answers2

0

In Bootstrap 2.3 you use affix like this:

<div data-spy="affix" data-offset-top="200">...</div>

I would think you need to remove the data-spy attribute from an element

el = $(el);
var affixed = el.attr('data-spy');
if((typeof affixed != undefined) && (affixed !== false) && (affixed == 'affix'))
  el.removeAttr( "data-spy" );

Something like that I think would work. Of course you could also remove the data-offset... attribute as well if there is one.

m.e.conroy
  • 3,508
  • 25
  • 27
  • 1
    this doesn't seem to work, as I am not adding the affix via an attribute on the div! I just need to be able to turn the affix on and off via javascript. thanks though :) – changus Nov 18 '13 at 20:54
0

Add/remove your own 'sticky' class (or whatever you want to call it) when toggling between modes. Then, in the css, add the following style to your element:

&:not(.sticky) { position: relative; }

The bootstrap affix events will still continue to fire, but this will override the affix position:fixed style.

jharmon
  • 1