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>

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

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

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:jQuery 顶部导航跟随滚动条滚动固定浮动在顶部 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • CSS中实现动画效果-附案例

    下面是关于“CSS中实现动画效果-附案例”的完整攻略: 1.动画效果基础知识 要学会实现CSS动画效果,首先需要了解CSS动画效果的基础知识。CSS3中定义了多种实现动画效果的方式,包括基于关键帧的动画和基于过渡的动画两种方式,下面对这两种方式进行详细说明: 1.1. 基于关键帧的动画 通过CSS3关键帧动画,可以实现在不同时间点上元素所呈现的不同状态,从而…

    css 2023年6月9日
    00
  • Bootstrap布局方式详解

    Bootstrap布局方式详解 Bootstrap是一个面向Web开发的前端框架,提供了丰富的CSS、HTML和JavaScript组件,它支持基于栅格系统的布局方式。本篇攻略将详细介绍Bootstrap的布局方式。 栅格布局 Bootstrap的栅格系统使用行(row)和列(column)来构建页面布局。栅格系统由12个列组成,可以根据不同的设备屏幕大小进…

    css 2023年6月10日
    00
  • 有趣的思路~~JS仿 WINXP 注销桌面渐隐效果

    首先要说明的是,本文所提到的“有趣的思路~~JS仿 WINXP 注销桌面渐隐效果”并不是一篇攻略或是教程,而是原作者在探究实现该效果时的思路和分析过程,同时分享了部分代码实现。 接下来,我将根据原文的思路和参考代码进行简要的说明。 思路 实现该效果的主要思路如下: 制作一张覆盖整个网站的div,并设置其z-index值为最大,使其覆盖其他所有元素。 给该di…

    css 2023年6月10日
    00
  • CSS的class与id常用的命名规则

    CSS的class和id是我们在网页开发中经常需要用到的命名规则。良好的命名规范不仅可以提高代码可读性和维护性,而且对SEO优化也有很大的帮助。下面是CSS的class和id常用的命名规则的完整攻略: 一、class命名规则 1.1 使用短横线-分隔每个单词 在定义class名称时,使用短横线-来分隔每个单词,例如:header-title、nav-bar、…

    css 2023年6月9日
    00
  • CSS教程,让网页对搜索引擎更友好

    下面是“CSS教程,让网页对搜索引擎更友好”的完整攻略。 一、为什么CSS可以优化网页对搜索引擎友好 CSS作为网页设计中的重要组成部分,不仅可以帮助网页实现美观的效果,同时也可以优化网页对搜索引擎的友好度。 具体来说,CSS可以通过以下方式来优化网页对搜索引擎友好: 分离HTML和CSS代码,使得搜索引擎更容易读取和理解网页内容。 使用CSS控制网页布局和…

    css 2023年6月9日
    00
  • 使用CSS实现黑暗模式和高亮模式的切换功能

    使用CSS实现黑暗模式和高亮模式的切换功能,需要使用CSS3 的新特性——变量(Variables)。我们可以通过设置变量和使用CSS中不同的选择器,来实现切换功能。具体步骤如下: 1. 定义颜色变量 :root { –text-color: #333333; –background-color: #ffffff; } 其中,:root 表示文档根元素,…

    css 2023年6月10日
    00
  • 微信小程序vant弹窗组件的实现方式

    关于微信小程序vant弹窗组件的实现方式,我给出以下完整攻略: 简介 vant是一款基于Vue.js的移动端组件库,在微信小程序中也可以使用,其中,vant提供了一些常用的弹窗组件供我们使用。 实现方式 在使用vant中的弹窗组件时,需先引入vant组件库: import "@vant/weapp/dist/toast/toast"; i…

    css 2023年6月10日
    00
  • jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)

    jQuery是一款广泛应用于前端开发的JavaScript库,其强大和便捷的API可以大大提高开发效率。在Web开发中,经常需要使用到弹出层和遮罩层,以提高用户体验。本文将结合示例,详细讲解如何使用jQuery操作DOM实现弹出页面遮罩层,以及在Web端和移动端中阻止遮罩层的滑动。 什么是遮罩层 遮罩层是一种运用在页面上的覆盖层,通常用于弹出框、模态框等场景…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部