javascript - 如何在特定条件下从元素中删除 Bootstrap Affix？

Question

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

到目前为止，我已经在控制台中尝试过这个，只是想看看它是否可以被删除，但它似乎没有用。

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

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

也许我的做法不对？如何以编程方式从已应用词缀的元素中删除词缀？

Answer 1

我最终选择了一个主要是 CSS 的解决方案，类似于@Marcin Skó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");