首页 > web前端 > css教程 > 正文

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

Barbara Streisand
发布: 2024-11-20 01:16:03
原创
297 人浏览过

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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板