Question

92

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

rated 0 times [ 99] [ 7] / answers: 1 / hits: 19085 / 11 Years ago, tue, march 12, 2013, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

lucianom

Add To Favorites

Follow

Total Points: 601

Total Questions: 98

Total Answers: 109

Location: Kenya

Member since Fri, Dec 23, 2022

1 Year ago

lucianom questions

1 Map and sort data by date

Tue, Feb 22, 22, 00:00, 2 Years ago

1 Typescript axios typings

Wed, May 5, 21, 00:00, 3 Years ago

1 Ho can I add two values in Bootstrap range slider

Sun, Jan 24, 21, 00:00, 3 Years ago

1 Discord.js, async and await

Sat, Aug 15, 20, 00:00, 4 Years ago

1 How do I call a JS Function in another file?

Mon, Jun 22, 20, 00:00, 4 Years ago

View All

answered 11 Years ago victorw · Accepted Answer

I ended up going for a mostly CSS solution, similar to what @Marcin Skórzewski suggested.

This just adds a new class when the height of the window is shorter than the height of the element.

var sizeTimer;

$(window).on(resize, function() {

    clearTimeout(sizeTimer);

    sizeTimer = setTimeout(function() {

        var isWindowTallEnough = $overviewContainer.height() + 20 < $(window).height();



        if (isWindowTallEnough) {

            $overviewContainer.removeClass(affix-force-top);

        } else {

            $overviewContainer.addClass(affix-force-top);

        }



    }, 300);

});

And then in CSS, this class just gets added:

.affix-force-top{

    position:absolute !important;

    top:auto !important;

    bottom:auto !important;

}

EDIT

For bootstrap 3, this seems to be effective:

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

$(#my-element)

    .removeClass(affix affix-top affix-bottom)

    .removeData(bs.affix);