js 滚动到一定位置导航定位在页面最顶部

最新推荐文章于 2022-10-31 14:56:36 发布

原创最新推荐文章于 2022-10-31 14:56:36 发布 · 551 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了一个简单的JavaScript实现的滚动导航定位功能。通过监听页面滚动事件并判断导航元素的位置，实现当用户向下滚动页面到一定位置时，导航条会固定在浏览器窗口的顶部，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js 滚动到一定位置导航定位在页面最顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js 滚动导航定位</title>
    <style>
        body {
            margin: 0;
            text-align: center;
            font-family: sans-serif;
        }
        .fixed {
            position: fixed;
            top: 0;
        }
        .sticky {
            width: 100%;
            background: #F6D565;
            padding: 25px 0;
            text-transform: uppercase;
        }
    </style>
</head>
<body>
    <p style="margin-bottom:100px;">Scroll this page.</p>
    <div class="sticky"><h3>Super amazing header</h3></div>
    <p style="margin-top:500px;">Still there?</p>
    <p style="margin-top:500px;">Yep!</p>
    <p style="margin-top:500px;">Scroll so hard!</p>
    <script>
        var sticky = document.querySelector('.sticky');
        var origOffsetY = sticky.offsetTop;
        function onScroll(e) {
            window.scrollY >= origOffsetY ? sticky.classList.add('fixed') : sticky.classList.remove('fixed');
        }
        document.addEventListener('scroll', onScroll);
    </script>
</body>
</html>