3

几个小时以来，我一直在绞尽脑汁和我的 Google Fu 试图找到一个解决方案，但似乎无法提出任何令人满意的解决方案。

我想将一个元素附加到页面的一侧以获得某些搜索条件，就像 Bootstrap 的“Affix”插件一样。（在这里演示）。问题是元素比窗口高得多的情况很常见。所以会涉及到元素本身的滚动。

通常这不会成为问题，因为当用户点击文档的顶部 + 底部时，他们将能够看到固定元素的顶部和底部。（请参阅引导示例，同时缩小窗口非常短）。但是我们计划在我们的结果集上使用无限滚动，这意味着不会有底部可以击中，因此他们永远不会看到固定元素的底部。当用户向下滚动时，它需要底部固定以便用户看到所有标准，然后在向上滚动时，它需要顶部固定。

所以我从修改 Bootstrap 的插件开始（我实际上并没有使用 bootstrap）。现在向下滚动页面很容易，在元素底部使用一个固定点意味着它直到你到达它的底部才被固定。

但是再次向上滚动是我遇到问题的地方。

我是否在这里遗漏了一些非常明显和容易的东西（毕竟是星期一早上），或者有人知道引导词缀的插件/补丁。

TL;DR 需要在页面上附加一个非常高的元素并允许它滚动。所以它在向下的路上是固定的，然后当他们向上滚动时，元素没有固定，所以它也在向上滚动。一旦元素的顶部被击中，将其固定在那里。

4

1 回答 1

0

这是你想做的吗DEMO

简单的 jQuery 函数会有所帮助。

$(function()
  {
 affix= $(".affix-top");
 var affixHeight = parseInt(affix.height());
 var affixTop    = parseInt(affix.offset().top);
 var affixBottom = parseInt(affixTop + affixHeight);

// Bind a scroll event for the whole page
$(document).bind("scroll", function(e) 
{
    // Calculate how far down the user has scrolled
    var screenBottom = parseInt($(window).height() +$(window).scrollTop()  );

    // Test if the div has been revealed
    if(screenBottom > affixBottom)
    {
      affix.attr("style","");
      affix.css({"bottom":"0px","position":"fixed"});
    }
   else
   {
    affix.attr("style","");
    affix.css({"top":"0px","position":"relative"});
   }
});

  });
于 2012-12-12T14:47:18.050 回答