jquery - Twitter bootstrap 更改词缀偏移

Question

我有我想要“子导航”的网站。因此，当您滚动到部分时，其工具栏将贴在主工具栏下方。我有这个工作，但我无法在初始化后更改顶部偏移量。文档说：

词缀（'刷新'）

当使用 affix 与从 DOM 中添加或删除元素一起使用时，您需要调用 refresh 方法：

但是当我尝试这个时，我得到：

未捕获的类型错误：对象 # 没有“刷新”方法

这是我的代码：

$(function () {
    $('.sec-nav').addClass("affix-top");
    var adjustNavs = function (first) {
        $('.sec-nav').each(function (){
            var $p = $(this).closest('.sec');
            var $$ = $p.prevAll('.sec');
            console.log($$);
            var h = 0;
            $$.each(function () { h+=$(this).outerHeight();});
            console.log(h);

            if (first) {
                $(this).affix({offset: {top: h}});
            } else {
                $(this).data('affix', {b: {options: {offset:{top: h}}}});
                console.log(this);
                $(this).affix('refresh')
            }

        });
    }
    adjustNavs(true);
    $('.sec').bind('DOMSubtreeModified', function () {
        adjustNavs();
    });
});

我尝试了不同的变体

                $(this).data('affix', {b: {options: {offset:{top: h}}}});

包含：

                $(this).affix({offset: {top: h}});

我无法改变偏移量。如何更改词缀插件的偏移量？谢谢。

Answer 1

我想到了。我没有动态更新偏移量，而是将偏移量值更改为一个函数：

$(function () {
    $('.sec-nav').addClass("affix-top").each(function (){
        var $self = $(this);
        var offsetFn = function () {
            var $p = $self.closest('.sec');
            var $$ = $p.prevAll('.sec');
            var h = 0;
            $$.each(function () { h+=$(this).outerHeight();});
            return h;
        }
        $self.affix({offset: {top: offsetFn}});
    });
});

现在，当一个部分由于 dom 操作或窗口重新大小而发生变化时，由于函数返回值的变化，偏移量会自动改变。

Answer 2

对于更基本的情况，我稍微简化了 Fatmuemoo 的回答：我的主页导航栏（默认引导程序 #masthead）位于 ID 为 #bg 的大背景滑块下方。滑块的高度随 3 个 css 断点而变化。我们只是将#masthead 的偏移量设置为等于滑块的高度。简单的！

    $('header#masthead').affix({ //sticky header at bottom of bg
        offset: {
          top: function(){return $("#bg").outerHeight();}
        }
    });

Answer 3

怎么样：

            $(window).off('.affix');
            $("#ID_NAME")
                .removeClass("affix affix-top affix-bottom")
                .removeData("bs.affix");
            $('#ID_NAME').affix({ 
              offset: {
                top: OTHER_VALUE
              }
            });