HTML固定的大元素

我已经费尽了我的大脑，我的谷歌富了几个小时，现在试图找到一个解决这一个，但似乎无法拿出任何令人满意的。HTML固定的大元素

我想一个元素粘贴到页面的一些搜索条件的一侧，就像引导的“后缀”插件。（Demo Here）。问题在于元素比窗口高很多很常见。所以会涉及元素本身的滚动。

通常这不会是一个问题，因为当用户点击该文件的顶部+底部，他们将能够看到固定元素的顶部和底部。（请参阅bootstrap示例，同时缩小窗口非常短）。但是我们打算在结果集上使用无限滚动，这意味着不会有底部触发，因此它们永远不会看到固定元素的底部。随着用户向下滚动，它需要被固定下来以便用户看到所有的标准，然后在上升的过程中，它需要被固定下来。

所以我通过修改引导的插件（我不实际使用引导程序）开始了。现在向下滚动页面很容易，使用元素底部的固定点意味着它不会被粘贴，直到到达底部。

但是再次向上滚动就是我打的问题。

难道我失去了一些东西真的很明显，容易在这里（它周一上午毕竟），或者没有人知道一个插件/补丁，以白手起家贴上。

TL; DR 需要在页面上添加一个很高的元素并允许它滚动。所以它在下降的过程中被固定下来，然后当它们向上滚动时，元素没有被固定，所以它也被滚动。一旦元素的顶部被击中，修复它。

来源

2012-12-03 Paystey

这里有一个小的演示：http://jsfiddle.net/6rQvq/15/ – Paystey

这是你想要做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-12 14:47:18 Champ

谢谢，这是非常密切的，这是在哪里我开始（尽管不是几乎一样优雅）。但是，如果您滚动页面的50％，然后想要进入菜单上的“下拉菜单”按钮，则必须一直滚动到页面的顶部。这似乎是我无法通过的关键。 – Paystey

这是一个逻辑缺陷的人。你必须考虑一个替代方案。你可以做一件事情检查用户的滚动方向，并相应地从上到下或从下到上改变菜单位置。 – Champ

HTML固定的大元素

回答

相关问题