如何确保 div 在滚动到它之后保持固定，无论其初始位置如何？-css教程-PHP中文网

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

Barbara Streisand

发布： 2024-11-20 01:16:03

原创

330 人浏览过

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

滚动到 Div 后固定它

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

解决方案：

要实现此目的，有两种主要方法：

仅 CSS方法：
- 利用CSS位置：滚动到所需位置后固定属性。
- 此解决方案可在现代浏览器中使用（有关详细信息，请参阅 https://stackoverflow.com/a/53832799/1482443）。
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中文网其他相关文章！