CSS & JavaScript - Sticky Navigation Bar 粘性导航栏

最新推荐文章于 2024-06-18 16:54:02 发布
最新推荐文章于 2024-06-18 16:54:02 发布
阅读量528 收藏 1
点赞数 3
分类专栏： HTML & CSS & JavaScript 文章标签： html css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29761395/article/details/117340662
版权

文章目录


备注：待重新编辑！

实现步骤

基本框架

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Sticky Navigation Bar</title>
    </head>
    <body>
        <header>
            <a href="#" class="logo">Logo</a>
            <ul>
                <li>
                    <a href="#">Home</a>
                </li>
                <li>
                    <a href="#">About</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>
            </ul>
        </header>
    </body>
</html>

在这里插入图片描述

全局样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Sticky Navigation Bar</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                font-family: "courier new";
                color: #FFFFFF;
            }
            body {
                background: #000000;
                min-height: 200vh;
            }
        </style>
    </head>
    <body>
        <header>
            <a href="#" class="logo">Logo</a>
            <ul>
                <li>
                    <a href="#">Home</a>
                </li>
                <li>
                    <a href="#">About</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>
            </ul>
        </header>
        <section class="banner"></section>
    </body>
</html>

在这里插入图片描述

固定导航栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Sticky Navigation Bar</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                font-family: "courier new";
                color: #FFFFFF;
            }
            body {
                background: #000000;
                min-height: 200vh;
            }
            header {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                transition: 0.6s;
                padding: 40px 100px;
            }
        </style>
    </head>
    <body>
        <header>
            <a href="#" class="logo">Logo</a>
            <ul>
                <li>
                    <a href="#">Home</a>
                </li>
                <li>
                    <a href="#">About</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>
            </ul>
        </header>
        <section class="banner"></section>
    </body>
</html>

在这里插入图片描述

Logo 样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Sticky Navigation Bar</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                font-family: "courier new";
                color: #FFFFFF;
            }
            body {
                background: #000000;
                min-height: 200vh;
            }
            header {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                transition: 0.6s;
                padding: 40px 100px;
            }
            header .logo {
                position: relative;
                font-weight: 700;
                color: #FFFFFF;
                text-decoration: none;
                font-size: 2em;
                text-transform: uppercase;
                letter-spacing: 2px;
                transition: 0.6s;
            }
        </style>
    </head>
    <body>
        <header>
            <a href="#" class="logo">Logo</a>
            <ul>
                <li>
                    <a href="#">Home</a>
                </li>
                <li>
                    <a href="#">About</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>
            </ul>
        </header>
        <section class="banner"></section>
    </body>
</html>

在这里插入图片描述

导航栏右侧菜单样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Sticky Navigation Bar</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                font-family: "courier new";
                color: #FFFFFF;
            }
            body {
                background: #000000;
                min-height: 200vh;
            }
            header {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                transition: 0.6s;
                padding: 40px 100px;
            }
            header .logo {
                position: relative;
                font-weight: 700;
                color: #FFFFFF;
                text-decoration: none;
                font-size: 2em;
                text-transform: uppercase;
                letter-spacing: 2px;
                transition: 0.6s;
            }
            header ul {
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            header ul li {
                position: relative;
                list-style: none;
                
            }
            header ul li a {
                position: relative;
                margin: 0 15px;
                text-decoration: none;
                color: #FFFFFF;
                letter-spacing: 2px;
                font-weight: 500px;
                transition: 0.6s;
            }
        </style>
    </head>
    <body>
        <header>
            <a href="#" class="logo">Logo</a>
            <ul>
                <li>
                    <a href="#">Home</a>
                </li>
                <li>
                    <a href="#">About</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>
            </ul>
        </header>
        <section class="banner"></section>
    </body>
</html>

在这里插入图片描述

背景图片

注意：需要修改 header 的 z-index 属性（第 28 行）。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Sticky Navigation Bar</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                font-family: "courier new";
                color: #FFFFFF;
            }
            body {
                background: #000000;
                min-height: 200vh;
            }
            header {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                transition: 0.6s;
                padding: 40px 100px;
                z-index: 100000;
            }
            header .logo {
                position: relative;
                font-weight: 700;
                color: #FFFFFF;
                text-decoration: none;
                font-size: 2em;
                text-transform: uppercase;
                letter-spacing: 2px;
                transition: 0.6s;
            }
            header ul {
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            header ul li {
                position: relative;
                list-style: none;
                
            }
            header ul li a {
                position: relative;
                margin: 0 15px;
                text-decoration: none;
                color: #FFFFFF;
                letter-spacing: 2px;
                font-weight: 500px;
                transition: 0.6s;
            }
            .banner {
                position: relative;
                width: 100%;
                height: 100vh;
                background: url(img/bg.jpg);
                background-size: cover;
            }
        </style>
    </head>
    <body>
        <header>
            <a href="#" class="logo">Logo</a>
            <ul>
                <li>
                    <a href="#">Home</a>
                </li>
                <li>
                    <a href="#">About</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>
            </ul>
        </header>
        <section class="banner"></section>
    </body>
</html>

在这里插入图片描述

header - toggle class

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Sticky Navigation Bar</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                font-family: "courier new";
                color: #FFFFFF;
            }
            body {
                background: #000000;
                min-height: 200vh;
            }
            header {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                transition: 0.6s;
                padding: 40px 100px;
                z-index: 100000;
            }
            header .logo {
                position: relative;
                font-weight: 700;
                color: #FFFFFF;
                text-decoration: none;
                font-size: 2em;
                text-transform: uppercase;
                letter-spacing: 2px;
                transition: 0.6s;
            }
            header ul {
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            header ul li {
                position: relative;
                list-style: none;
                
            }
            header ul li a {
                position: relative;
                margin: 0 15px;
                text-decoration: none;
                color: #FFFFFF;
                letter-spacing: 2px;
                font-weight: 500px;
                transition: 0.6s;
            }
            .banner {
                position: relative;
                width: 100%;
                height: 100vh;
                background: url(img/bg.jpg);
                background-size: cover;
            }
        </style>
    </head>
    <body>
        <header>
            <a href="#" class="logo">Logo</a>
            <ul>
                <li>
                    <a href="#">Home</a>
                </li>
                <li>
                    <a href="#">About</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>
            </ul>
        </header>
        <section class="banner"></section>
    </body>
    
    <script type="text/javascript">
        window.addEventListener("scroll", function() {
            const header = document.querySelector("header")
            header.classList.toggle("sticky", window.scrollY > 0)
        })
    </script>
</html>

在这里插入图片描述

最终效果 - 发生滚动之后，修改导航栏的样式

  • 第 30 ~ 33 行
  • 第 64 ~ 69 行
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Sticky Navigation Bar</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                font-family: "courier new";
                color: #FFFFFF;
            }
            body {
                background: #000000;
                min-height: 200vh;
            }
            header {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                transition: 0.6s;
                padding: 40px 100px;
                z-index: 100000;
            }
            header.sticky {
                padding: 5px 100px;
                background: #FFFFFF;
            }
            header .logo {
                position: relative;
                font-weight: 700;
                color: #FFFFFF;
                text-decoration: none;
                font-size: 2em;
                text-transform: uppercase;
                letter-spacing: 2px;
                transition: 0.6s;
            }
            header ul {
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            header ul li {
                position: relative;
                list-style: none;
                
            }
            header ul li a {
                position: relative;
                margin: 0 15px;
                text-decoration: none;
                color: #FFFFFF;
                letter-spacing: 2px;
                font-weight: 500px;
                transition: 0.6s;
            }
            header.sticky .logo {
                color: #000000;
            }
            header.sticky ul li a {
                color: #000000;
            }
            .banner {
                position: relative;
                width: 100%;
                height: 100vh;
                background: url(img/bg.jpg);
                background-size: cover;
            }
        </style>
    </head>
    <body>
        <header>
            <a href="#" class="logo">Logo</a>
            <ul>
                <li>
                    <a href="#">Home</a>
                </li>
                <li>
                    <a href="#">About</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>
            </ul>
        </header>
        <section class="banner"></section>
    </body>
    
    <script type="text/javascript">
        window.addEventListener("scroll", function() {
            const header = document.querySelector("header")
            header.classList.toggle("sticky", window.scrollY > 0)
        })
    </script>
</html>

在这里插入图片描述

参考

滚动渐变导航栏

好好活着，不要熬夜
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
史上最全网址导航大全，让世上没有找不到的好东西
lzcsdn233的博客
01-04 26万+
收录的导航网址大全 好用和常用的网址几乎都在里面,个人喜欢往浏览器书签收藏夹里塞喜欢的干货和网站，以至于收藏夹里有着几千条网址，所以比较喜欢导航，但是浏览器原生自带的导航又太low,所以一般自己设置打开浏览器时即开的导航页便于工作和学习. 辛苦收集整理，喜欢给个赞哦???? 常用 导航名 地址 今日热榜 https://tophub.today 龙轩导航 http://ilxdh.c...
Pure-Css-Sticky-Navigation-Bar
05-04
这个项目&ldquo;Pure-Css-Sticky-Navigation-Bar&rdquo;专注于使用纯CSS实现这一功能，不依赖JavaScript或其他外部库。让我们深入探讨如何通过HTML和CSS创建一个这样的导航栏。 首先，我们需要构建HTML结构。一个简单的导航栏...
Android仿微博、人人Feed详情页吸附导航栏
qizhenghao的专栏
03-27 2075
仿微博、人人的feed详情页面：Listview上下滑动，导航栏view可吸附在顶部的效果。一、实现效果上图：Github: https://github.com/qizhenghao/StickyNavigationBar欢迎拍砖，拍拍更进步。没有对比，怎么会有伤害，下面是 微博、人人的Feed详情页：二、实现原理1、实例化两个一样的导航栏view，一个放在页面根布局顶部的view1，另一个放在L
day25-Sticky Navbar（粘性的导航条）
格式化小拓
07-16 67
50 天学习 50 个项目 - HTMLCSS and JavaScript day25-Sticky Navbar（粘性的导航条） 效果 index.html &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&
MeoAI：全网最全的AI导航网站，5000+AI工具，整理全网的免费AI工具
最新发布
qq_26303031的博客
06-18 861
MeoAI，最高效全面的工具集合网站，5000多个AI工具网址。每日更新和添加最新AI工具。MeoAI工具导航网站，收录了国内外个不同类型的AI工具。
好看的导航主页html,推荐|各种漂亮的网页导航，让浏览器靓起来
weixin_39527487的博客
06-10 19万+
最近刚买了电脑，蹲了半个月，实在是蹲不到荣耀magicbook14的16G版。忍不住加钱买了小新PRO13，真的是万幸的是目前还没有遇到较大的品控问题，新电脑入手肯定得一番折腾。强迫症的我为了个网页导航折腾了一下午，真的是太闲了我。至于我为什么这么闲，那一切就要从一只小小的蝙蝠说起了。言归正传，今天我就来给大家分享一下几个好看又好用的浏览器主页。一、简法主页这个就是我挑选了几个之后选用的导航，说实...
很色，非常色，十分色，格外色，异常色，特别色，相当色，太色了！
热门推荐
coldwindflyrain的专栏
06-18 175万+
■■★●◆lightpink（浅粉红)■■★●◆pink（粉红）■■★●◆crimson（腥红）■■★●◆lavenderblush（苍白的紫罗兰红）■■★●◆palevioletred（脸红的淡紫红）■■★●◆hotpink（热情的粉红）■■★●◆mediumvioletred（适中的紫罗兰红）■■★●◆orchid（兰花紫）■■★●◆thistle（苍紫）■■★●◆plum（轻紫）■■★●◆v
柠檬导航巨人导航正品蓝_福特合作Telenav提供汽车导航服务 即使无蜂窝网络也可正常工作...
weixin_39643336的博客
11-20 34万+
加入盖世行业交流群，请加微信(盖世汽车豆豆：gasgoo88)出示名片，了解更多行业资讯盖世汽车讯 据外媒报道，随着全新款F-150皮卡和Bronco两门与三门4x4 SUV车型可以为福特客户带来越来越刺激的冒险，福特与Telenav正帮助此类客户确保网联导航技术能够在遥远的探险地继续正常工作，不像只要在蜂窝网络范围之外就无法工作的智能手机地图应用一样。(图片来源：福特)网联汽车和定位服...
各大导航网站分享来啦
MiaChen的博客
07-02 4万+
【合集】设计师网址导航 https://hao.uisdc.com/ 小牛导航 http://super-nb.com pmtodo https://pmtodo.cn/ 还有众多网站分享，在我的看板上面，大家自取 https://web.banlikanban.com/kanban/60cab47db371922617b39af6/欢迎查看板栗看板「设计必备网站&amp;网址&amp;公众号推荐」 搜索 公举号 碰妞 有更多精彩哟~ 本文由博客一文多发平台 OpenWrite 发布！ ...
sticky-navigation-bar:使用HTML CSS JS的粘性导航栏
03-29
本项目&quot;sticky-navigation-bar&quot;是一个使用HTML、CSS和JavaScript实现的粘性导航栏示例。 首先，我们来了解HTML的基础结构。在HTML文件中，你需要创建一个`&lt;nav&gt;`元素作为导航栏容器，并在其中包含链接或其他导航...
Javascript-sticky-Navigation-Project
03-17
在这个项目中，开发者将学习如何创建一个在用户滚动页面时始终保持在屏幕顶部的导航栏，这种效果被称为&ldquo;粘性导航&rdquo;。粘性导航在现代网页设计中非常常见，因为它能提供良好的用户体验，使用户在浏览长页面时始终能够...
sticky-navbar:使用Vanilla CSS和JavaScript的简单动画粘性导航栏
04-30
在这个项目中，我们将使用纯CSS（Vanilla CSS）和JavaScript来创建一个带有简单动画效果的粘性导航栏。 首先，我们需要在HTML结构中设置导航栏的基本框架。一个简单的导航栏可能包括`&lt;nav&gt;`标签，内部包含一系列...
3D导航栏
orange_girls的博客
06-06 7294
3D导航栏
日常学习网站
折翼孤雁
03-26 2万+
机器视觉/图像处理类网站 1)halcon学习网Halcon学习网 2)51halcon: Halcon视觉之家-51Halcon专注于机器视觉技术 3)重码网：重码网-halcon-merlic-visionpro-python-java-vc-c#-wpf-vb-delphi-PowerBuilder-Matlab-android-ios-windows phone-微信-php-jsp-perl-asp-asp.net-ruby-go-opencv-labview-Matrox Mil-Sh..
有什么好用的网站导航？
Usher_Ou的博客
12-07 3万+
其实简约的网址导航不是没有，而是太过于小众，总是藏在隐秘的角落。对于‘简约的网址导航’的定义，我认为，首先得页面和ui设计的足够简单简洁；二是对功能做提炼，而不是大家常见的网址导航的那种’大而全’；三是使用上 好用？ 既然是简约了，还能好用吗？刚才说了，对功能做提炼，只保留大家最需要的功能，用起来反而一目了然，得心应手。 开始列名单： 1-万象网址导航 万象网址导航www.letaotao.site 2-某柠檬导航 两个版本 标准版： 某柠檬_柠檬味的导航www.moulem.comwww.moulem.
常用网址导航推荐
qq_37320386的博客
02-12 1万+
作为一个程序员在工作开发中可能会遇到各种问题，需要各种问题解决，各种搜索资料一般都是穿梭在百度必应360等等各种导航之间， 所以需要一个好的网址导航作为浏览器主页，所以今天就给大家推荐几个不错的的导航网站 NO1.小不点导航 地址:http://xiaobudiandh.com 优点一 它的界面清新 比较整齐 优点二 基本的一些在线工具都有整理比如在线翻译 在线json解析 md5加解密 基本都有，不需要我们在一个一个去搜索 优点三（这个也很好的一点） 就是他的搜索栏可以直接...
2024年特色导航网站大全已更新，值得你一览收藏本页
06-02 12万+
下面这些是已制作好的、实用的垂直导航。 1：Seeseed-无穷尽设计可能，为设计师提供国内外最全的设计灵感、设计素材、设计工具、设计教程。 网址：https://www.seeseed.com/ 2：考拉新媒体导航——新媒体人的专属门户网站 网址：https://www.kaolamedia.com/ 3：萌导航 网址：https://www.moe123.net/ 4：三顿导航——一站式搞定PPT设计 网址：http://sandunppt.com/ 5：图床导航 网址：http..
5个聚合导航网站，资源、工具、素材应有尽有
cccccww的博客
06-13 1万+
浏览器，这个工作和学习中会频繁接触的工具让用户选择起来一直都是令人头疼的事情。
van-sticky粘性布局如何获取change改变状态
05-24
van-sticky是Vue.js组件库Vant中的一种粘性布局组件，它可以将页面元素固定在屏幕顶部或底部，并且在滚动页面时保持位置不变。 如果需要在van-sticky组件状态改变时获取通知，可以使用其提供的change事件。当组件的...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值