javascript - 在某些情况下，如何从元素中删除Bootstrap Affix？

我在使用Twitter Bootstrap Affix插件的地方有一个元素。如果窗口的垂直大小调整到小于项目高度的程度，我想从元素中删除词缀功能，因为您将无法在窗口中看到所有窗口。

到目前为止，我已经在控制台中尝试过此操作，只是为了查看是否可以将其删除，但是它似乎无法正常工作。

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

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

也许我会以错误的方式进行操作？如何以编程方式从已经应用了词缀的元素中删除词缀？

最佳答案

我最终选择了一个主要的CSS解决方案，类似于@MarcinSkórzewski提出的建议。

当窗口的高度小于元素的高度时，这只会添加一个新类。

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);
});

然后在CSS中，只添加了此类:

.affix-force-top{
    position:absolute !important;
    top:auto !important;
    bottom:auto !important;
}

编辑

对于 bootstrap 3，这似乎是有效的:

$(window).off('.affix');
$("#my-element")
    .removeClass("affix affix-top affix-bottom")
    .removeData("bs.affix");