twitter-bootstrap 如何在某些条件下从元素中删除 Bootstrap 词缀？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15366519/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I remove Bootstrap Affix from an element under certain conditions?
提问by CBarr
I have an element where I'm using the Twitter Bootstrap Affixplugin. If the window gets vertically resized to the point where it is smaller than the height of the item, I'd like to remove the affix functionality from the element since you wouldn't be able to see all of it in the window.
我有一个使用Twitter Bootstrap Affix插件的元素。如果窗口垂直调整到小于项目高度的点，我想从元素中删除词缀功能，因为您将无法在窗口中看到所有内容。
So far I've tried this in the console just to see if it can be removed, but it doesn't seem to be working.
到目前为止，我已经在控制台中尝试过这个，只是想看看它是否可以删除，但它似乎不起作用。
$("#myElement")
.removeClass("affix affix-top affix-bottom")
.removeData("affix");
$(window)
.off("scroll.affix.data-api, click.affix.data-api");
Maybe I'm going about this the wrong way? How Can I programmatically remove the affix from an element that already had it applied?
也许我会以错误的方式解决这个问题？如何以编程方式从已应用的元素中删除词缀？
回答by CBarr
I ended up going for a mostly CSS solution, similar to what @Marcin Skórzewski suggested.
我最终选择了一个主要的 CSS 解决方案，类似于@Marcin Skórzewski 的建议。
This just adds a new class when the height of the window is shorter than the height of the element.
当窗口的高度小于元素的高度时，这只会添加一个新类。
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);
});
And then in CSS, this class just gets added:
然后在 CSS 中，这个类刚刚被添加：
.affix-force-top{
position:absolute !important;
top:auto !important;
bottom:auto !important;
}
EDIT
编辑
For bootstrap 3, this seems to be effective:
对于引导程序 3，这似乎是有效的：
$(window).off('.affix');
$("#my-element")
.removeClass("affix affix-top affix-bottom")
.removeData("bs.affix");
回答by Marcin Skórzewski
Deprecated: Answer refers to Twitter Bootstrap v2. Current version is v4.
已弃用：答案是指 Twitter Bootstrap v2。当前版本是 v4。
There are few options to try.
可以尝试的选项很少。
- Use function for
data-offset-top. Normally, you use the integer value, for number of scrolled pixels to fix the element. According to documentationyou can use the JS function, that will calculate the offset dynamically. In this case you can make your function to return different number depending on the conditions of your choice. - Use media queryto override affix CSS rule for small window (eg. height 200px or less).
- 将函数用于
data-offset-top. 通常，您使用整数值作为滚动像素的数量来修复元素。根据文档，您可以使用 JS 函数，该函数将动态计算偏移量。在这种情况下，您可以根据您选择的条件使您的函数返回不同的数字。 - 使用媒体查询来覆盖小窗口的附加 CSS 规则（例如高度 200 像素或更小）。
I think, the second variant should be suitable for you. Something like:
我认为，第二种变体应该适合您。就像是：
@media (max-height: 200px) {
.affix {
position: static;
}
}
If you would provide jsfiddle for your problem others could try to actually solve it, instead of giving just theoretical suggestion, that may or may not work.
如果您愿意为您的问题提供 jsfiddle，其他人可以尝试实际解决它，而不是仅提供理论建议，这可能会也可能不会起作用。
PS. Bootstrap's navbar component uses media query for max-width to disable fixed style for small devices. It is good to do that not just because the screen size is to small for navbar, but in mobile devices position: fixed;CSS works really ugly. Take w look at navbarinside the bootstrap-responsive.cssfile.
附注。Bootstrap 的导航栏组件使用 max-width 的媒体查询来禁用小型设备的固定样式。这样做很好，不仅因为屏幕尺寸对于导航栏来说太小了，而且在移动设备中position: fixed;CSS 的工作方式非常丑陋。看看navbar里面的bootstrap-responsive.css文件。
回答by dcPages
Your $(window).offis close, according to @fat (author of bootstrap-affix.js) you can disable the plugin like this:
你$(window).off很接近，根据@fat（bootstrap-affix.js 的作者）你可以像这样禁用插件：
$(window).off('.affix');
That will disable the affix plugin.
这将禁用词缀插件。
回答by nick
On line 1890 of bootstrap is a conditional for whether the default action should be prevented. This allows your to listen for events and if some condition is met, prevent the affix from happening.
bootstrap 的第 1890 行是是否应该阻止默认操作的条件。这允许您侦听事件，如果满足某些条件，则防止词缀发生。
line 1890 from bootstrap: if (e.isDefaultPrevented()) return
引导程序中的第 1890 行：如果 (e.isDefaultPrevented()) 返回
Example:
例子：
$('someselector')
.affix()
.on(
'affix.bs.affix affix-top.bs.affix affix-bottom.bs.affix'
, function(evt){
if(/* some condition */){
evt.preventDefault();
}
}
);
回答by Mike Korn
Even though this was answered, I just wanted to give my solution for this in case someone ran into a similar situation as mine.
即使有人回答了这个问题，我只是想给出我的解决方案，以防有人遇到与我类似的情况。
I modified the offset top option to a ridiculous number that would never get scrolled to. This made it so I did not have to do $(window).off('.affix'); and disable affix for everything.
我将偏移顶部选项修改为一个永远不会滚动到的荒谬数字。这使得我不必做 $(window).off('.affix'); 并禁用所有内容的词缀。
$('#element-id').data('bs.affix').options.offset.top = 1000000000;
