Question

我正在尝试在bootstrap中实现一个词缀。这不应该是一个问题，但我想让它做出回应。

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

我只是搜索它，找到了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事件上调用它。

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

当你打开它时，调整reult窗口的大小，同时在边框词缀前有2列，然后重新加载页面。向下滚动时，您会看到，词缀在需要时开始工作。
仅保留左列时调整窗口大小。 Affix现在也有效。
再次调整窗口大小，同时显示右列。现在，当它到达前一个位置时，它会触发左列的高度。那很糟糕。

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

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在初始化时由插件动态添加，并且由于您使用JavaScript初始化它也不需要data-spy="affix"属性。

所以，你的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属性。错误，即affix插件绑定了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);
            }
        }
    });
};

Bootstrap词缀重置不起作用

2 个答案: