How do I remove Bootstrap Affix from an element under certain conditions?

Question

I have an element where I'm using the Twitter Bootstrap Affix plugin. If the window gets vertically resized to the point where it is smaller than the height of the item, I'd like to remove the affix functionality from the element since you wouldn't be able to see all of it in the window.

So far I've tried this in the console just to see if it can be removed, but it doesn't seem to be working.

$("#myElement")
  .removeClass("affix affix-top affix-bottom")
  .removeData("affix");

$(window)
  .off("scroll.affix.data-api, click.affix.data-api");

Maybe I'm going about this the wrong way? How Can I programmatically remove the affix from an element that already had it applied?

Answer 1

Even though this was answered, I just wanted to give my solution for this in case someone ran into a similar situation as mine.

I modified the offset top option to a ridiculous number that would never get scrolled to. This made it so I did not have to do $(window).off('.affix'); and disable affix for everything.

$('#element-id').data('bs.affix').options.offset.top = 1000000000;