当前位置：文江博客话题详情

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

发布于 2024-10-10 18:23:19 字数 143 浏览 1 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

自由如风 2024-10-17 18:23:20

这是 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
}

确保您的位置：absolute & top ：值集）

更新的功能（放置在结束正文标记之前）

<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 - 的类名称将函数应用到的元素

This is a more functional vetrsion of http://jsbin.com/ijexe
(updated the code to reenable the origional position... essentially once it hits its origional top position it will start scrolling again)

You can update the http://jsbin.com/ijexe code to test simply by swapping out the jquery function with the one below...

In the

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

in the example:

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

(just make sure you have your position:absolute & top: value set)

Updated function (place before the closing body tag)

<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>

You can update:
scrollTo - The offset from the top of the screen to start/stop the element scrolling

* Just make sure scroll to is set to the same value as your stylesheet decliration...

scrollClass - The class name for the element(s) to apply the function to

回复收藏 0 原文

~没有更多了~