jQuery 顶部导航跟随滚动条滚动固定浮动在顶部-前端开发

这里为大家提供一种基于jQuery实现顶部导航随滚动条滚动固定浮动在顶部的方式。

这里为大家提供一种基于jQuery实现顶部导航随滚动条滚动固定浮动在顶部的方式。

首先，页面头部需要包含jQuery库的引用。使用CDN可行性较高，此处使用jQuery官方CDN。

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

然后，实现导航的固定和解除固定，我们需要用到jQuery的scroll事件以及一些CSS控制。

示例一，通过添加固定class来实现：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery顶部导航固定示例</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <style>
        /* 模拟页面滚动 */
        .content {
            margin-top: 100px;
        }
        /* 导航默认样式 */
        .nav {
            width: 100%;
            height: 50px;
            background-color: #F3F3F3;
            /* 使导航在顶部浮动 */
            position: fixed;
            top: 0;
        }
        /* 导航固定时的样式 */
        .nav-fixed {
            background-color: #FFF;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        }
        /* 页面滚动时的钩子样式 */
        .scroll-hook {
            height: 50px;
        }
    </style>
</head>
<body>
    <!-- 导航条 -->
    <nav class="nav">
        <ul>
            <li><a href="#s1">Section 1</a></li>
            <li><a href="#s2">Section 2</a></li>
            <li><a href="#s3">Section 3</a></li>
        </ul>
    </nav>
    <!-- 内容区 -->
    <div class="content">
        <div class="scroll-hook"></div>
        <div id="s1">Section 1</div>
        <div id="s2">Section 2</div>
        <div id="s3">Section 3</div>
    </div>
    <!-- 导航条占位符 -->
    <div class="nav-placeholder"></div>
</body>
<script>
    $(window).scroll(function () {
        // 当前页面滚动位置
        var scrollH = $(window).scrollTop();
        // 导航条目标固定位置锚点
        var navTop = $(".scroll-hook").offset().top;
        // 添加或移除固定class
        if (scrollH >= navTop) {
            $(".nav").addClass("nav-fixed");
            $(".nav-placeholder").show();
        } else {
            $(".nav").removeClass("nav-fixed");
            $(".nav-placeholder").hide();
        }
    })
    // 根据导航宽度创建对应高度的占位符
    $(".nav-placeholder").height($(".nav").outerHeight(true));
</script>

在这个示例中，我们通过滚动事件监听页面滚动的位置，当页面滚动到导航条顶部时，给导航条添加.nav-fixed样式，相应地修改背景色和阴影样式，使其在页面顶部悬浮，同时通过占位符占据导航条原本在文档流中占据的空间。

示例二：通过改变导航条position属性值来实现。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery顶部导航固定示例</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <style>
        /* 导航默认样式 */
        .nav {
            width: 100%;
            height: 50px;
            background-color: #F3F3F3;
        }
        /* 导航固定时的样式 */
        .nav-fixed {
            background-color: #FFF;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
            /* 使导航在顶部浮动 */
            position: fixed;
            top: 0;
        }
        /* 模拟页面滚动 */
        .content {
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <!-- 导航条 -->
    <nav class="nav">
        <ul>
            <li><a href="#s1">Section 1</a></li>
            <li><a href="#s2">Section 2</a></li>
            <li><a href="#s3">Section 3</a></li>
        </ul>
    </nav>
    <!-- 内容区 -->
    <div class="content">
        <div id="s1">Section 1</div>
        <div id="s2">Section 2</div>
        <div id="s3">Section 3</div>
    </div>
    <script>
        var navTop = $(".nav").offset().top;
        $(window).scroll(function () {
            var scrollH = $(window).scrollTop();
            if (scrollH >= navTop) {
                $(".nav").addClass("nav-fixed");
            } else {
                $(".nav").removeClass("nav-fixed");
            }
        });
    </script>
</body>
</html>

在此示例中，我们没有通过占位符将导航条原本所占的空间保留下来，并且没有手动设置占位符高度，而是通过初始时记录导航条顶部的位置，这样也便于实现导航条锁定滚动之后的位置，为之后的动画等样式易于设定提供方便。

使用哪种实现方法，取决于设计和个人偏好。