带有无限滚动和 window.resize 的 Twitter 引导词缀

Question

通过阅读一些相关问题，我意识到 twitter 引导附加组件根本没有 $.affix('refresh') 方法可用 - 我的问题虽然相关，但可能只是刷新之间的额外步骤，让我试着解释一下。

我有一个带有标准引导导航栏的页面。在其下方，一旦用户滚动经过 x 像素，我将附加一个“固定”的子导航（在我的情况下，导航栏的高度为 41 像素，因此在 41 像素时，词缀开始生效，并将 .affix 类更改为.affix {top:41px}一切都好）

所以对于第一个词缀，我可以使用 html-only 属性。

在页面的下方（本质上可以被认为是“第二页”）我有另一条导航，一旦用户滚动到某个位置，它应该“附加”并替换第一个子导航 - 考虑到该位置第二页/词缀因内容而异，我使用js计算第一页的高度并根据我得到的设置offset: {top:xxx}。

这也很有效/正如预期的那样，用户向下滚动一点，第一个子导航词缀启动，如果他继续滚动并到达页面下方的第二个子导航，它会启动并替换第一个词缀'ed sub-nav（实际上它本身并没有取代它，而是用更高的 z-index 覆盖）

从这里开始，我遇到了两个我无法找到解决方案的问题：

1. 当用户重新调整窗口大小时，第一页的内容当然会变长，这会改变我在页面下方粘贴的原始偏移顶部尺寸。首先，我认为对.affix('refresh') 的简单调用将/可能是解决方案，但当然该方法甚至在组件上都不可用。接下来，我想我可以再次手动重新计算高度并重新创建$('.my-second-affix').affix({offset: {top:x-new-offset}}); - 但由于某种原因，这似乎根本不起作用，我不知道为什么:(

   李>

2. 接下来要解决的问题是我也在使用 jquery infinitescroll 来加载越来越多的页面...每个页面可能在不同阶段都有其他子导航，我想添加和替换上一个词缀现在位于顶部。

注意然后我还想确保如果用户向后滚动另一个方向，以前附加的子导航会重新附加自己向后退（我怀疑他们会很好只要词缀偏移正确）

希望这个解释足以突出我的问题，并且有人以前处理过这个问题，或者可以为解决方案提供一些指导。我试图让偏移量成为一个从顶部返回当前偏移量的函数（如另一个问题Twitter bootstrap change affix offset 中所述），但由于某种原因，它也不能按预期工作。

非常感谢任何帮助

Answer 1

你试过$('#myAffix').affix('checkPosition')。这在 Bootstrap3.0 中可用

Answer 2

这个问题已经很老了，但是因为没有其他人回答过......

我在词缀方面遇到了类似的问题。这是我解决它的方法。

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

即使在窗口大小调整后，这些设置也应将附加元素保持在其容器的边界内。

Answer 3

如果我理解正确，您将需要计算调整大小的偏移量。 这个例子是使用 Jquery 比如：

$(window).resize(calcOffset);

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

Answer 4

我会建议你在代码本身中使用偏移量，例如<div class="col-md-offset-6">。