20

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

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

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

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

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

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

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

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

请注意，我还想确保如果用户向后滚动另一个方向，则先前附加的子导航会向后重新附加自己（我怀疑只要附加偏移正确，它们就可以了）

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

任何帮助是极大的赞赏

4

4 回答 4

1

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

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

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

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

于 2016-03-25T21:19:45.457 回答
1

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

于 2015-08-13T07:14:58.483 回答
0

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

$(window).resize(calcOffset);

    function calcOffset() 
         {
            var location = $("myElement").offset();
            var top = location.top;
         }
于 2015-10-21T12:18:05.083 回答
0

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

于 2016-03-12T15:59:55.067 回答