首页 >web前端 >css教程 >如何确保 div 在滚动到它之后保持固定,无论其初始位置如何?

如何确保 div 在滚动到它之后保持固定,无论其初始位置如何?

Barbara Streisand
Barbara Streisand原创
2024-11-20 01:16:03358浏览

How can you ensure a div stays fixed after scrolling to it, despite its initial position?

滚动到 Div 后固定它

问题:如何确保 div 在滚动后保持固定尽管其最初的立场是

解决方案:

要实现此目的,有两种主要方法:

  1. 仅 CSS方法:

    • 利用CSS位置:滚动到所需位置后固定属性。
    • 此解决方案可在现代浏览器中使用(有关详细信息,请参阅 https://stackoverflow.com/a/53832799/1482443)。
  2. jQuery方法:

    • 使用 jQuery 监听滚动事件。
    • 使用 offset().top 方法确定所需 div 的初始位置。
    • 应用如果滚动位置超过 div 的初始位置,则位置:固定样式,否则恢复为位置:静态。下面是 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'
        });
    }

});

无论采用哪种方法,您都可以在滚动到 div 后有效地使其固定。在这两种方法之间进行选择时请记住考虑浏览器支持。

以上是如何确保 div 在滚动到它之后保持固定,无论其初始位置如何?的详细内容。更多信息请关注PHP中文网其他相关文章!

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