将边界添加到位置为固定的元素

Question

我有一个与position: fixed一起移动的正确的滚动div，但我希望当它到达特定的（y轴）边界时停止。这样做的方法是什么？

理想情况下，解决方案不会闪烁并且性能卓越。 Twitter的右侧面板接近我想要的。

Answer 1

这是http://jsbin.com/ijexe 功能更强大的vetrsion（更新代码来重新启用原始位置......基本上，一旦达到其原始顶部位置才能重新开始滚动）

您可以更新http://jsbin.com/ijexe代码试验简单地通过与下面的一个换出jQuery函数...

在

<script type="text/javascript" src="Sandbox_files/jquery.min.js"></script> 

在示例

：

.fixedElement { 
    Z-INDEX: 100; POSITION: absolute; BACKGROUND-COLOR: #c0c0c0; WIDTH: 100%; HEIGHT: 30px; COLOR: #800000; FONT-SIZE: large; TOP: 200px 
} 

（只要确保你有你的位置是：绝对&顶部：值集）（结束标记之前的地方）

更新功能

<script type="text/javascript"> 
$(window).scroll(function(e){ 

    var scrollTo = 200; 
    var scrollClass = '.fixedElement'; 

    $el = $(scrollClass); 
    position = $el.position(); 
    if ($(this).scrollTop() > scrollTo && $el.css('position') != 'fixed'){ 
    $(scrollClass).css({'position': 'fixed', 'top': '0px'}); 
    } else if ((position.top < scrollTo) && ($el.css('position') != 'relative')){ 
    $(scrollClass).css({'position': 'relative', 'top': '200px'}); 
    } 
}); 
</SCRIPT> 

您可以更新： scrollTo - 从屏幕顶部偏移开始/停止元素滚动

*只要确保滚动t Ø设置为相同的值，你的样式表decliration ...

scrollClass - 元素（一个或多个）类的名字到功能应用到