HTML 固定大元素

Question

我已经绞尽脑汁和我的 Google Fu 几个小时了，试图找到解决这个问题的方法，但似乎找不到任何令人满意的解决方案。

我想在页面的一侧附加一个元素来满足一些搜索条件，很像 Bootstrap 的“Affix”插件。 (Demo Here)。问题是元素比窗口高得多的情况很常见。所以会涉及到元素本身的滚动。

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

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

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

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

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

Answer 1

这是你想做的吗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"});
   }
});

  });