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日

相关文章

  • Dreamweaver怎么插入水平线并设置颜色?

    插入水平线并设置颜色是Dreamweaver中基本的排版样式之一,下面是此操作的详细攻略: 步骤一:打开Dreamweaver并选择需要插入水平线的位置 在Dreamweaver中打开需要插入水平线的网页文件,然后在需要插入水平线的位置点击鼠标光标。 步骤二:插入水平线 在页面顶部的“插入”菜单中,找到“水平线”选项并点击。也可以使用快捷键Ctrl+Shif…

    css 2023年6月9日
    00
  • VScode格式化ESlint方法(最全最好用方法)

    VScode格式化ESlint方法(最全最好用方法) 简介 ESLint是一个可插入的静态代码分析工具,用于识别和报告模式中的问题。它是在 ECMAScript/JavaScript 代码中寻找问题的。代码分析是将源代码(特定于编程语言的)表示转换为一种表示,以便更容易分析代码并找到缺陷。 VScode是一款非常流行的轻量级代码编辑器,拥有丰富的插件生态系统…

    css 2023年6月9日
    00
  • javaScript checkbox 全选/反选及批量删除

    下面我来详细讲解一下“JavaScript checkbox 全选/反选及批量删除”的完整攻略。 核心思路 JavaScript实现checkbox全选/反选及批量删除的核心思路如下: 获取页面上所有的checkbox元素,并添加相应的事件监听函数; 创建一个“全选”checkbox元素,点击全选时,遍历所有checkbox,将它们的checked属性设置为…

    css 2023年6月10日
    00
  • 浅谈前端网络、JavaScript优化以及开发小技巧

    浅谈前端网络、JavaScript优化以及开发小技巧 前端技术的发展,让前端页面承载的内容越来越重,优化前端页面成为提高用户体验的必经之路。本文将从网络优化、JavaScript优化以及开发小技巧三个方面来探讨如何优化前端页面。 网络优化 减少HTTP请求 在前端开发中,减少请求次数可以降低页面的加载时间。常见的减少请求次数的方式有两种: 图片合并:将多个小…

    css 2023年6月10日
    00
  • 关于CSS渲染:CSS是如何绘制颜色的

    关于CSS渲染,颜色绘制是特别重要的一部分。下面我就来详细讲解一下“关于CSS渲染:CSS是如何绘制颜色的”。 什么是CSS颜色 首先,我们需要了解什么是 CSS 颜色。在 CSS 中,颜色可以用关键词、 RGB 值、十六进制值、 HSL 值、 HSLA 值等多种方式表示。CSS 中用颜色定义的元素包括:文本、边框、背景色等。 CSS颜色绘制过程 CSS 渲…

    css 2023年6月9日
    00
  • css列表滑动防止被底部遮住和适配屏幕长一点的机型处理

    针对“css列表滑动防止被底部遮住和适配屏幕长一点的机型处理”,我为您提供以下完整攻略: 1. 让列表滑动不被底部遮住 当列表在移动端中央时,如果连续滑动到底部,可能会出现列表底部被底部导航栏遮挡的情况,为了解决这个问题,我们需要使用CSS中的position属性和bottom属性。 具体步骤如下: 给列表容器添加position: relative;属性,…

    css 2023年6月10日
    00
  • React过渡动画组件基础使用介绍

    React过渡动画组件是一种用于实现Web应用中页面元素动态过渡效果的组件。它可以帮助我们实现微小的动效、对话框和模态框动画、路由变换等一系列过渡效果。本文将为大家详细讲解React过渡动画组件基础使用介绍。 前置知识 在阅读本文之前,您需要了解一些React的基础概念,例如React组件、React生命周期等知识。另外,您还需要掌握CSS3动画的基本应用。…

    css 2023年6月10日
    00
  • 用css完成根据子元素不同书写样式的方法

    实现根据子元素不同书写样式的方法有多种方式,例如使用CSS选择器的 :nth-child 或者 :nth-of-type 伪类,以及使用 JavaScript 等方法。以下是其中两种方法的示例说明: 方法一:使用CSS选择器的 :nth-child 伪类 :nth-child(n) 伪类选择器用于匹配某个元素的父元素下第 n 个子元素,可以用来实现对子元素进…

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