Bootstrap词缀重置不起作用

Question

我试图在bootstrap中实现一个词缀.它不应该是一个问题,但我想让它响应.

当页面调整大小时,一些元素将隐藏在页面顶部,并且由于宽度的变化,我需要重置词缀并设置为新位置.

我只是搜索它,并找到了一个公认的解决方案,但似乎它不起作用.

这就是我尝试过的:

$(window).off('#myAffix');
$('#myAffix').removeData('bs.affix').removeClass('affix affix-top affix-bottom');
$('#myAffix').affix({
    offset: {
        top: function () {
            console.log('Offset top from: ' + $('.navbar').offset().top);
            return (this.top = $('.navbar').offset().top);
        }
    }
});

我正在呼吁它document.ready和window.resize事件.

我已经为它创建了一个演示.这是步骤,如何重现问题:

• 当你打开它时,调整reult窗口的大小,同时在边框词缀前有2列,然后重新加载页面.向下滚动时,您将看到,词缀在需要时开始工作.

• 仅保留左列时调整窗口大小.Affix现在也有效.

• 再次调整窗口大小,同时显示右列.现在,当它到达前一个位置时,它会触发左列的高度.那很不好.

看来,我的代码正在运行,但对词缀没有任何影响.

PS:不关心词缀的位置,我只是想修复,何时/何地将被修复.

jsFiddle在这里.

Answer 1

在您的示例中,您在HTML中具有.affix-top类和data-spy="affix"属性.

<nav class="navbar scroll-menu affix-top" data-spy="affix" id="myAffix" style="border: 1px solid #f00;">
  <ul class="nav navbar-nav" style="font-size: 10px; background: #fff;">
    <li><a href="#section1">SECTION ONE</a></li>
    <li><a href="#section2">SECTION TWO</a></li>
  </ul>
</nav>

这些不是必需的,因为.affix-top在初始化时由插件动态添加,并且data-spy="affix"由于您使用JavaScript初始化它也不需要该属性.

那么,你的HTML将是:

<nav id="myAffix" class="navbar scroll-menu" style="border: 1px solid #f00;">
  <ul class="nav navbar-nav" style="font-size: 10px; background: #fff;">
    <li><a href="#section1">SECTION ONE</a></li>
    <li><a href="#section2">SECTION TWO</a></li>
  </ul>
</nav>

此外,在文档中它指定了以下内容:

通过数据属性使用affix插件或使用您自己的JavaScript手动使用.在这两种情况下,您必须为附加内容的定位和宽度提供CSS.

这意味着您应该添加一些CSS来设置附加div的宽度和位置.

.affix {
  top: 40px;
  /* This is the desired offset where the affixed div will appear */
  width: 100%;
  /* This is the desired width where the affixed div will have */
}

通过上述更改,词缀可以按预期工作,无论是全屏还是小屏幕.

但后来,我偶然发现了一个错误!在全屏加载时出现错误,然后调整为小屏幕.

在小屏幕中,插件记住了offset全屏初始化的属性.问题是,在window.scroll永不删除的事件中,affix插件绑定了一个处理程序.

这是一个内存泄漏错误(在此处找到),并在答案中提到了解决方法.

所以,而不是呼吁:

$(window).off('#myAffix');

您应该调用以下内容来正确删除先前初始化创建的所有事件

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

总而言之,你的JS就像:

$.initAffix = function() {
  $('#myAffix').affix({
    offset: {
      top: function() {
        console.log('Offset top from: ' + $('.navbar').offset().top);
        return (this.top = $('.navbar').offset().top);
      }
    }
  });
};

$.resetAffix = function() {
  console.log('resetAffix');
  $(window).off('.affix');
  $('#myAffix').removeData('bs.affix').removeClass('affix affix-top affix-bottom');
  $.initAffix();
};

$(window).on('resize', $.resetAffix);

$.initAffix();

这是一个工作演示.