Bootstrap 词缀重置不起作用

我正在尝试在引导程序中实现一个词缀。这应该不是问题，但我想让它响应。

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

我刚刚搜索了一下，发现了一个接受的解决方案 https://stackoverflow.com/questions/23797241/resetting-changing-the-offset-of-bootstrap-affix，但看起来，这并不奏效。

这是我尝试过的：

$(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 events.

我已经为它创建了一个演示。这是重现问题的步骤：

• 当您打开它时，在边框词缀之前有 2 列时调整结果窗口的大小，然后重新加载页面。当您向下滚动时，您会看到，词缀在需要时开始工作。

• 调整窗口大小，同时仅保留左列。 Affix 现在也可以使用。

• 再次调整窗口大小，同时出现右列。现在，当到达之前的位置时，affix 将触发左列的高度。那很不好。

看起来，我的代码正在运行，但对 Affix 没有影响。

PS：不要关心词缀的位置，我只想固定，何时/在哪里固定。

jsFiddle 在这里 https://jsfiddle.net/0ryx617v/.

在您的示例中，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 来设置附加 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全屏初始化的属性。错误是该 affix 插件绑定了一个处理程序window.scroll永远不会被删除的事件。

这是一个内存泄漏错误（发现here https://stackoverflow.com/questions/21713468/bootstrap-affix-plugin-memory-leak），答案中提到了解决方法。

因此，不要调用：

$(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();

这是一个工作demo https://jsfiddle.net/codingstill/q9z5dt6a/10/.