13

我有一个使用Twitter Bootstrap Affix插件的元素。如果窗口垂直调整到小于项目高度的点，我想从元素中删除词缀功能，因为您将无法在窗口中看到所有它。

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

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

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

也许我会以错误的方式解决这个问题？如何以编程方式从已应用的元素中删除词缀？

4

5 回答 5

18

我最终选择了一个主要是 CSS 的解决方案，类似于 @Marcin Skó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-12T21:43:38.807 回答
9

已弃用：答案是指 Twitter Bootstrap v2。当前版本是 v4。

可以尝试的选择很少。

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

我认为，第二个变体应该适合你。就像是：

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

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

PS。Bootstrap 的导航栏组件使用媒体查询 max-width 来禁用小型设备的固定样式。这样做很好，不仅因为导航栏的屏幕尺寸太小，而且在移动设备中position: fixed;CSS 的效果真的很丑。拿 w 看navbar里面的bootstrap-responsive.css文件。

于 2013-03-12T20:48:21.043 回答
7

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

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

这将禁用词缀插件。

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

于 2013-06-06T04:41:08.367 回答
3

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

引导程序中的第 1890 行：if (e.isDefaultPrevented()) return

例子： 

$('someselector')
.affix()
.on(
    'affix.bs.affix affix-top.bs.affix affix-bottom.bs.affix'
    , function(evt){  
        if(/* some condition */){  
            evt.preventDefault();  
        }  
    }
);
于 2014-05-06T16:52:45.483 回答
1

即使这个问题得到了回答，我只是想给出我的解决方案，以防有人遇到与我类似的情况。

我将 offset top 选项修改为一个永远不会滚动到的荒谬数字。这样我就不必这样做了 $(window).off('.affix'); 并禁用所有东西的词缀。

$('#element-id').data('bs.affix').options.offset.top = 1000000000;
于 2016-12-19T20:35:00.130 回答