Javascript HTML固定大元素

我已经绞尽脑汁和谷歌浏览器几个小时了，试图找到解决这个问题的办法，但似乎找不到任何令人满意的办法

我想在页面的侧面添加一个元素，以获得一些搜索条件，这很像Bootstrap的“粘贴”插件。(). 问题是，元素比窗口高得多是很常见的。因此，所涉及的元素本身会滚动

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

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

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

我是否错过了一些非常明显和简单的东西（毕竟是周一早上），或者是否有人知道引导的插件/补丁

TL；DR

---

需要在页面上粘贴一个非常高的元素并允许其滚动。所以它在向下滚动时是固定的，然后当它们向上滚动时，元素不是固定的，所以它也在向上滚动。一旦元素的顶部被击中，就在那里修复它

这就是你想要做的吗

简单的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"});
   }
});

  });

---

这里有一个小的演示：谢谢，非常接近，这就是我的目的（虽然没有那么优雅）。但是如果你滚动页面的50%，然后想进入菜单上的“下拉”按钮，你必须一直滚动到页面顶部。这似乎是我无法通过的症结所在。伙计，这是一个逻辑缺陷。你必须想一个替代方案。您可以做一件事来检查用户的滚动方向，并相应地从上到下或从下到上更改菜单位置。