Question

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

我想在页面的一侧添加一个元素以获得一些搜索条件，就像Bootstrap的“Affix”插件一样。（Demo Here）。问题是元素比窗口高得多是很常见的。因此，将涉及元素本身的滚动。

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

所以我开始修改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"});
   }
});

  });

HTML固定大元素

1 个答案: