引导词缀重置不起作用

Question

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

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

我只是搜索它，找到了一个accepted solution，但它似乎不起作用。

这是我尝试过的：

$(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 事件上调用它。

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

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

• 调整窗口大小，而只保留左列。词缀现在也可以使用了。

• 再次调整窗口大小，同时出现右列。现在词缀将触发，当它到达上一个位置时，左列的高度。这很糟糕。

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

PS：不关心词缀的位置，我只想修复，什么时候/在哪里修复。

jsFiddle here.

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>

此外，在文档中它指定了以下内容：

通过数据属性使用词缀插件或手动使用您自己的 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属性。 错误是 词缀插件在window.scroll 事件中绑定了一个处理程序，该处理程序永远不会被删除。

这是一个内存泄漏错误（找到here），答案中提到了解决方法。

所以，不要调用：

$(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。

Answer 2

您只需要进行一项更改即可让您的代码按您的意愿工作，这就是将$(window).off('#myAffix'); 更改为$(window).off('.affix');

这是新功能：

$.myFunction = function() {
    $(window).off('.affix')
    $('#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);
            }
        }
    });
};