向具有位置的元素添加边界：固定答案

【问题标题】：Add boundaries to element with position:fixed向具有位置的元素添加边界：固定
【发布时间】：2011-01-07 02:57:03
【问题描述】：

我有一个带有position: fixed 的 div，它可以随着滚动正确移动，但我想让它在到达某些（y 轴）边界时停止。这样做的方法是什么？

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

【问题讨论】：

你看过 Twitter 的代码，看看他们是怎么做的吗？
是的。 twitter 始终保持相同的固定顶部属性。这对他们有用，因为他们的标题很窄。鉴于我有一个大标题，当我向下移动时，右窗格将在页面上向下。

标签： javascript css position css-position

【解决方案1】：

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

您可以更新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 - 从屏幕顶部开始/停止元素滚动的偏移量

* 只需确保将滚动到设置为与样式表声明相同的值...

scrollClass - 应用函数的元素的类名

【讨论】：