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。

尝试的选项很少。

使用data-offset-top的功能。通常，您使用整数值，用于固定元素的滚动像素数。根据{{3}}，您可以使用JS函数，它将动态计算偏移量。在这种情况下，您可以根据您选择的条件使您的功能返回不同的数字。
使用documentation覆盖小窗口的附加CSS规则（例如，高度200px或更低）。

我认为，第二种变体应该适合你。类似的东西：

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

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

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

Answer 3

你的$(window).off已经关闭，根据@fat（bootstrap-affix.js的作者）你可以禁用这个插件：

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

这将禁用词缀插件。

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

Answer 4

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

第1890行来自bootstrap： 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;

如何在某些条件下从元素中删除Bootstrap Affix？

5 个答案: