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

我有一个元素，我在使用Twitter Bootstrap Affix插件。如果窗口被垂直调整大小到小于项目高度的位置，我想从元素中删除附加功能，因为您无法在窗口中看到它的全部内容。如何在特定条件下从元素中删除Bootstrap Affix？

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

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

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

也许我正在谈论这个错误的方式？我如何以编程方式从已经应用的元素中删除词缀？

来源

2013-03-12 Chris Barr

我最终选择了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; 
}

编辑

对于引导3，这似乎是有效的：

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

来源

2013-03-12 21:43:38

感谢您的Bootstrap 3编辑，这对我来说非常合适 – Smegger 2014-04-09 09:34:41

对我来说也是如此。谢谢 – Nizam 2014-05-08 10:12:33

谢谢你。仅供参考 - 如果我在元素开始添加之前运行'$（window）.off（'。affix'）;'，则不需要删除这些类，如果这是有意义的。 – thekingoftruth 2015-03-19 17:41:13

不赞成：答案指的是Twitter Bootstrap v2。当前版本是v4。

有几个选项可以尝试。

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

我觉得，第二个变种应该适合你。喜欢的东西：

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

如果你想你的问题他人提供的jsfiddle可以尝试真正解决它，而不是给只是理论上的建议，可能会或可能无法正常工作。

PS。 Bootstrap的导航栏组件使用最大宽度的媒体查询来禁用小设备的固定样式。这样做不错，不仅仅是因为屏幕尺寸对于导航栏来说很小，而且在移动设备上也是如此。请看bootstrap-responsive.css文件中的navbar。

来源

2013-03-12 20:48:21

我喜欢这个想法，但媒体查询将是一个硬编号，并且无法确定元素的高度是否小于窗口高度。同样，'top'属性*的功能可以工作，但它仍然会返回一个数字以开始粘贴。我需要它全能的不再附加。 – 2013-03-12 21:31:56

当你不想修复你的菜单时，你仍然应该能够通过返回非常大的数字来使用偏移功能。 Bootstrap的组件意味着易于启动，而不是完整的解决方案。如果你需要更多的东西，那么如果你对JS/jQuery有点熟悉，那么自己修改元素位置的实现是一件容易的事情。因此，不用修补词缀，使用'on（“scroll”，...）'来修复/解除修饰可能更好。 – 2013-03-12 22:07:26

我认为是一个好主意，在位置右侧添加一个“！important”：static。这样你将覆盖现有的类设置。 – BernieSF 2015-01-23 20:59:56

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

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

这将禁用词缀插件。

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

来源

2013-06-06 04:41:08 dcPages

但是，这会禁用所有粘贴的块。 – Paul 2015-10-16 13:38:23

在自举的1890线是一个条件为是否应该防止默认操作。这使您可以倾听事件，如果遇到某些情况，请避免发生词缀。

线从1890年举：如果（e.isDefaultPrevented（））返回

例子：

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

来源

2014-05-06 16:52:45 nick

此答案包含应该在Bootstrap文档中的信息。我正在寻找一种方法来切换词缀，就是这样。其他解决方案要么消除所有元素的词缀，要么不必要的复杂。 – Paul 2015-10-16 13:44:51

即使这是说，我只是想给我的这个解决方案，以防有人遇到了和我一样的情况。

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

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

来源

2016-12-19 20:35:00

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

回答

相关问题