首页 >web前端 >css教程 >如何让滚动div粘过去后呢?

如何让滚动div粘过去后呢?

DDD
DDD原创
2024-11-13 14:47:02410浏览

How to Make a Scrolling Div Stick After Passing it?

制作滚动 Div Stick

需要在滚动经过特定 div 后保持其静止吗?以下是如何使用 CSS 或 jQuery 来实现这一点。

仅 CSS 方法

根据最近的进展,仅 CSS 就可以完成此功能。更多详细信息可以在这里找到:[滚动后仅 CSS 固定 Div](https://stackoverflow.com/a/53832799/1482443)。

jQuery 方法

如果 jQuery 可以接受,请尝试this:

  1. 定义div的初始位置:

    var fixmeTop = $('.fixme').offset().top;   
  2. 添加滚动事件监听器:

    $(window).scroll(function() {  
  3. 判断滚动位置是否已经过了初始div位置:

    if (currentScroll >= fixmeTop) {
  4. 滚动经过 div 时应用固定定位:

        $('.fixme').css({                      
            position: 'fixed',
            top: '0',
            left: '0'
        });
  5. 滚动到 div 上方时重置定位:

    } else {                                   
        $('.fixme').css({                      
            position: 'static'
        });
    }

了解更全面了解后,请查看这个实例:[滚动后的 jQuery 固定 Div](http://jsfiddle.net/5n5MA/2/)。

以上是如何让滚动div粘过去后呢?的详细内容。更多信息请关注PHP中文网其他相关文章!

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