如何在某些条件下从元素中删除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工作真的很难看。 看看bootstrap-responsive.css文件中的navbar 。

Answer 3

你的$(window).off很接近，根据@fat（bootstrap-affix.js的作者）你可以像这样禁用插件：

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

这将禁用词缀插件。

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

Answer 4

在引导程序的第1890行是有条件的，是否应该阻止默认操作。 这允许您监听事件，如果满足某些条件，则防止词缀发生。

来自bootstrap的1890行：if（e.isDefaultPrevented（））返回

例：

$('someselector')
.affix()
.on(
    'affix.bs.affix affix-top.bs.affix affix-bottom.bs.affix'
    , function(evt){  
        if(/* some condition */){  
            evt.preventDefault();  
        }  
    }
);

Answer 5

尽管有人回答了这个问题，但我还是想解决这个问题，万一有人遇到类似我的情况。

我将偏移顶部选项修改为一个永远不会滚动到的荒谬数字。 这使得我没有必要做$（window）.off（'。affix'）; 并禁用所有内容的词缀。

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