Question

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

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

Answer 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 - 将函数应用于

的元素的类名

使用position：fixed添加边界到元素

1 个答案: