Twitter Bootstrap固定导航栏结合无限滚动和窗口大小调整

Question

通过阅读一些相关问题，我意识到 Twitter Bootstrap 的 affix 组件根本没有可用的 `$ .affix（'refresh'）` 方法。虽然我的问题与之相关，但可能需要更多步骤来刷新，让我尝试解释一下。

我有一个带有标准 bootstrap 导航栏的页面。在导航栏下面，我会固定一个子导航，一旦用户滚动超过 x 像素（在我的情况下，导航栏高度为 41px，因此在 41px 处启用 affix，并通过将 `.affix` 类更改为 `.affix {top:41px}` 来解决所有问题）

所以对于这个第一个 affix，我可以使用仅限 HTML 的属性。

在页面的下方（本质上可以视为“第二页”），我有另一个导航，当用户滚动到某个位置时，应该“fix”，并替换第一个子导航 - 鉴于第二页/ fix 的位置由于内容而变化，我使用 js 计算第一页的高度，并基于我得到的设置 offset：{top：xxx}。

这也非常适用/符合预期，当用户向下滚动一点时，第一个子导航栏会固定在页面顶部；如果他继续滚动并到达页面下方的第二个子导航栏，它将启动并替换第一个固定的子导航栏（实际上不是完全替换，而是以更高的z-index覆盖）。从这里开始，我有两个问题，我没有找到解决方法：

1. 当用户调整窗口大小时，第一页的内容会变长，从而改变了我用于页面下方 affix 的原始 offset-top 尺寸。起初我以为简单调用 .affix('refresh') 即可解决，但是当然这个方法在组件上并不可用。接下来，我想到可以手动重新计算高度并重新创建 $('.my-second-affix').affix({offset: {top:x-new-offset}}); - 但出于某种原因，这似乎根本不起作用，我无法弄清原因 :(

2. 接下来要解决的问题是，我还使用了 jquery infinitescroll 来加载更多页面...每个页面可能在各个阶段都有其他子导航，我想对其进行 affix 和替换，替换为现在位于顶部的任何最后一个 affix。

注意 我还希望确保如果用户向后滚动，以前固定的子导航将重新固定（只要 affix 偏移正确，它们应该能够正常工作）

希望这个解释足以突显我的问题，希望有人曾经处理过这个问题或者可以提供一些解决方案的指导。我已经尝试让偏移量成为一个返回当前距顶部的偏移量的函数（如在另一个问题Twitter bootstrap change affix offset中提到），但出于某种原因，这也不起作用。任何帮助都将不胜感激。

- Andre

---

这只是一种辅助而非答案。我之前在$.fn.affix处理中遇到过类似（但不完全适用）的情况。我写了一个函数来响应调整大小。我建议使用underscore或者lodash，或者编写自己的debounce函数。这对于减少JavaScript负载非常有用，并且还可以帮助防止变化时的不连续性。写自己的信息可以在这里找到：http://davidwalsh.name/javascript-debounce-function - dgo

将所有不同的子导航作为第二行、第三行等添加到您的Bootstrap导航中，根据用户滚动的距离来隐藏或显示它们，这个想法怎么样？ - Michael Tallino

Answer 1

你尝试过$('#myAffix').affix('checkPosition')吗？这是Bootstrap3.0中可用的。

- vijayP

Answer 2

这个问题很旧，但由于没有其他人回答它......我曾经遇到过一个类似的 affix 问题。以下是我的解决方法。

$('.affixed-elements').each(function() {
   var topOffset = 0; //calculate your top offset here
   var $container = //Set this to the element's container;
   $(this).affix({
      offset: {
         top: function() {
            return $container.offset().top - topOffset;
         },
         bottom: function() {
            return $('body').height() - ($container.offset().top+$container.outerHeight());
        }
      }
   });
});

那些设置应该保持固定元素在容器边界之内，即使窗口大小调整。

- Joe Zeleny

Answer 3

如果我理解正确，您需要在调整大小时计算偏移量。这个例子使用Jquery，类似于：

$(window).resize(calcOffset);

    function calcOffset() 
         {
            var location = $("myElement").offset();
            var top = location.top;
         }

- F.P

Answer 4

我建议您在代码中使用偏移量，就像这样：<div class="col-md-offset-6">。

- Manish62

---

这并没有回答问题。一旦您拥有足够的声望，您就可以在任何帖子上发表评论；相反，提供不需要询问者澄清的答案。- 来自审查 - Milap

好的，我认为我们通过互相帮助来学习。我们总是通过分享我们所知道的东西来学到一些东西，兄弟。 - Manish62