问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

JS页面sticky翻页效果如何实现？

头像
NEOTSO
    31617

    image.png

    整个页面有2个部分，
    第一部分如上图蓝色标注，蓝色部分高度大于浏览器高度，
    滑动蓝色部分往上，当蓝色部分的底部和浏览器的底部的保持一致高度的时候，
    希望蓝色部分固定住，类似sticky的效果，
    继续滑动页面往上，白色部分会直接往上走，盖在蓝色部分往上滑动，
    请问下这个效果有什么关键字吗

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div
            style="
                position: sticky;
                bottom: 50px;
                height: 200vh;
                background-color: lightblue;
                border-bottom: 10px solid orange;
                z-index: 19;
            "
        ></div>
        <div style="height: 150vh; background-color: red"></div>
    </body>
</html>
    css前端javascript
    阅读 3.1k
    3 个回答
    得票最新
    头像
    乔治
      12.9k1329
      <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            body {
                margin: 0;
                overflow-x: hidden;
            }
            .sticky-section {
                height: 200vh;
                background-color: lightblue;
                border-bottom: 10px solid orange;
            }
            .scroll-section {
                height: 150vh;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="sticky-section" id="stickySection"></div>
        <div class="scroll-section"></div>
        <script>
            const stickySection = document.getElementById('stickySection');

            window.addEventListener('scroll', () => {
                const stickyBottom = stickySection.getBoundingClientRect().bottom;
                const windowHeight = window.innerHeight;

                if (stickyBottom <= windowHeight) {
                    stickySection.style.position = 'fixed';
                    stickySection.style.bottom = '0';
                } else {
                    stickySection.style.position = 'static';
                }
            });
        </script>
    </body>
</html>

      看看这篇文章用原生JS实现滚轮翻页效果

      头像
      children111
        3829
        <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div
            style="
                position: sticky;
                /* bottom: 50px; */
                top:calc(-100vh - 50px);
                height: 200vh;
                background-image: linear-gradient(to bottom, blue,skyblue);
                border-bottom: 10px solid orange;
                z-index: 0;
            "
        ></div>
        <div style="height: 150vh;width: 50vw; background-color: red;position: relative; z-index: 1;
        "></div>
    </body>
</html>

        看这样子行不行，sticky应该没有bottom的用法，只能固定在上面，其他还能通过控制div的一些层级进行更细点的操作

        头像
        NEOTSO
          31617

          监听滚动事件，
          获取蓝色部分的getBoundingClientRect().bottom,
          当bottom的值等于屏幕高度时，
          给蓝色部分设置 position: sticky; top: getBoundingClientRect().top
          就可以了

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题