如何在某些条件下从元素中删除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的解决方案,类似于@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");

Answer 2

不推荐使用:答案是指Twitter Bootstrap v2.当前版本是v4.

没有什么选择可以尝试.

1. 使用功能data-offset-top.通常,您使用整数值,用于固定元素的滚动像素数.根据文档,您可以使用JS函数,它将动态计算偏移量.在这种情况下,您可以根据您选择的条件使您的功能返回不同的数字.
2. 使用媒体查询覆盖小窗口的附加CSS规则(例如,高度200px或更低).

我认为,第二种变体应该适合你.就像是:

@media (max-height: 200px) {
  .affix {
    position: static;
  }
}

如果你为你的问题提供jsfiddle,其他人可以尝试实际解决它,而不是只提供理论建议,可能会或可能不会.

PS.Bootstrap的导航栏组件使用最大宽度的媒体查询来禁用小型设备的固定样式.这样做很好,不仅因为导航栏的屏幕尺寸很小,而且在移动设备中,position: fixed;CSS的工作非常难看.看看navbar里面的bootstrap-responsive.css文件.

Answer 3

你$(window).off是接近的,根据@fat(引导-affix.js的作者),您可以禁用这样的插件:

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

这将禁用词缀插件.

请参阅:https://github.com/twitter/bootstrap/issues/5870