首页 >web前端 >css教程 >如何在滚动时保持 DIV 固定在适当的位置?

如何在滚动时保持 DIV 固定在适当的位置?

Patricia Arquette
Patricia Arquette原创
2024-11-21 03:53:13711浏览

How to Keep a DIV Fixed in Place While Scrolling?

如何在滚动上锁定 DIV?

如果您有一个稍后出现在页面上的 DIV,您可能需要它一旦滚动后变得可见,就保持固定在适当的位置。要实现这一目标,以前仅使用 CSS 是不可能的。然而,CSS 的进步现在使其变得可行。

有关更详细的解释,请参阅此 Stack Overflow 答案:https://stackoverflow.com/a/53832799/1482443

如果您愿意一个 jQuery 解决方案,请考虑以下示例:

var fixmeTop = $('.fixme').offset().top;
$(window).scroll(function() {
  var currentScroll = $(window).scrollTop();
  if (currentScroll >= fixmeTop) {
    $('.fixme').css({
      position: 'fixed',
      top: '0',
      left: '0'
    });
  } else {
    $('.fixme').css({
      position: 'static'
    });
  }
});

此 jQuery 代码允许您修复 a 的位置一旦滚动超过其初始位置,DIV 的类为“fixme”。

以上是如何在滚动时保持 DIV 固定在适当的位置?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn