JS实现网页导航条特效

更新时间：2021年10月14日 16:11:02 作者：aiguangyuan

这篇文章主要为大家详细介绍了JS实现网页导航条特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例给大家分享了一个用原生JS实现的比较实用的网页导航条特效，当页面滚动时，导航条会发生变化，效果如下：

以下是代码实现，欢迎大家复制粘贴和收藏。

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生JS实现网页导航条特效</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            word-wrap: break-word;
            font-family: '微软雅黑', sans-serif;
        }
 
        body {
            background: #000;
            min-height: 200vh;
        }
 
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: 0.6s;
            padding: 40px 100px;
            z-index: 2;
        }
 
        header.sticky {
            padding: 5px 100px;
            background: #fff;
        }
 
        header .logo {
            position: relative;
            font-weight: 700;
            color: #fff;
            text-decoration: none;
            font-size: 2em;
            text-transform: uppercase;
            letter-spacing: 2px;
            transition: 0;
        }
 
        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: #fff;
            letter-spacing: 2px;
            font-weight: 500px;
            transition: 0.5s;
        }
 
 
        .banner {
            position: relative;
            width: 100%;
            height: 100vh;
            background: url(bg.jpg);
            background-size: cover;
        }
 
        header.sticky .logo,
        header.sticky ul li a {
            color: #000;
        }
    </style>
</head>
 
<body>
    <header>
        <a href="#" class="logo">Logo</a>
        <ul>
            <li><a href="#" >首页</a></li>
            <li><a href="#" >关于</a></li>
            <li><a href="#" >服务</a></li>
            <li><a href="#" >作品</a></li>
            <li><a href="#" >联系</a></li>
        </ul>
    </header>
    <section class="banner"></section>
    <script>
        window.addEventListener('scroll', () => {
            let header = document.querySelector('header')
            // 重要属性
            header.classList.toggle('sticky', window.scrollY > 0)
        })
    </script>
</body>
 
</html>

以下是代码中所引用的图片 bg.jpg

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

js
导航条

微信小程序添加插屏广告并设置显示频率(一天一次)
微信小程序今年新上线了插屏广告，设置和在代码库中接入都非常方便。今天通过本文给大家分享微信小程序添加插屏广告并设置显示频率(一天一次),需要的朋友可以参考下
2019-12-12
js将当前时间格式转换成时间搓(自写)
将时间转换成时间搓的方法有很多，在本文为大家介绍下使用js将当前时间转换成时间搓例如2013-09-11 12:12:12，感兴趣的朋友可以参考下
2013-09-09
JavaScript中EventLoop介绍
本篇文章给大家详细介绍了JavaScript中EventLoop的相关知识，有这方面需要的朋友参考学习下。
2018-01-01
JS获取节点的兄弟,父级,子级元素的方法
本篇文章主要是对JS获取节点的兄弟,父级,子级元素的方法进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-01-01
用JavaScript实现PHP的urlencode与urldecode函数
这篇文章主要介绍了用JavaScript实现PHP的urlencode与urldecode函数,很多情况下我们用了出来php urlencode出来的网址，需要的朋友可以参考下
2015-08-08
原生js实现对Ajax的封装(仿jquery)
这篇文章主要为大家详细介绍了原生js实现对Ajax的封装，模仿jquery，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-01-01
微信小程序onLaunch异步,首页onLoad先执行?
这篇文章主要介绍了微信小程序onLaunch异步,首页onLoad先执行? 文章底部给大家介绍了小程序_onLaunch异步回调数据加载问题的两种解决方案，需要的朋友可以参考下
2018-09-09
Smartour 让网页导览变得更简单(推荐)
这篇文章主要介绍了Smartour 让网页导览变得更简单(推荐)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-07-07
微信小程序实现带刻度尺滑块功能
这篇文章主要介绍了微信小程序实现带刻度尺滑块功能，非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-03-03
JS中数学计算精度问题的解决方案
这篇文章主要给大家介绍了JS中数学计算精度问题的解决方案,文中通过代码示例和图文结合给大家讲解非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
2023-12-12