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="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="logo">Logo</a>
        <ul>
            <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >首页</a></li>
            <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >关于</a></li>
            <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >服务</a></li>
            <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >作品</a></li>
            <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >联系</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

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

赞 (0)

相关推荐

  • vuejs 切换导航条高亮(路由菜单高亮)的方法示例

    vuejs 切换导航条高亮(路由菜单高亮)的方法示例

    我的GitHub前端经验总结,喜欢的话请点star:Thanks.: https://github.com/liangfengbo/frontend-develop vuejs导航条高亮我的做法: 用一个数组存导航条,用v-for循环它,这样可以减少代码,二可以使用它的下标来判断高亮,三还可以获取后端的导航信息来遍历 重点是在:routerLink(index, path)函数,传入当前点击的下标,自定义一个下标,判断是否相等就用三元符号判断多给一个高亮样式 如何解决刷新就不高亮或第一个高亮了,

  • 基于JS代码实现导航条弹出式悬浮菜单

    1.概述 采用弹出式悬浮菜单,不但可以使网站的导航内容更加清晰,而且不影响页面的整体效果.运行本实例,如图1所示,当鼠标移动到一级导航菜单的标题上时,将弹出悬浮菜单显示该菜单对应的子菜单,鼠标移出时,将隐藏悬浮菜单. 2.技术要点 本实例主要是在JavaScript中,动态改变<div>标签对象的style属性的display属性值来实现动态显示和隐藏二级导航菜单.其实,每一个一级菜单下的二级菜单内容是已经添加在网页的<div>标签中,只是此时设置了<div>不显示.所

  • 纯JS实现弹性导航条效果

    纯JS实现弹性导航条效果

    效果图: 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin:0; padding:0; list-style:none;} ul{ overflow:hidden; background:#ccc; width:574px; margin:100px auto;

  • javascript实现的鼠标悬停时动态翻滚的导航条

    动态翻滚的导航条 .clear:after{content:"."; display:block; height:0; clear:both; visibility:hidden}.clear{display:inline-block}.clear{display:block} div#nav{height:32px; background:url(http://files.jb51.net/demoimg/200911/YL29.jpg) repeat-x} div#nav ul{

  • CSS3+Js实现响应式导航条

    CSS3+Js实现响应式导航条

    今天制作了一个响应式导航条,能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式,这里主要用到的就是CSS3的Media Query.具体可以查看浅谈响应式布局这篇文章,这里就不花费大量的篇幅介绍了,主要看一下这个导航条该怎么做. 另外需要提到的是,ie6-ie8是不支持CSS3的Media Query的,因此对于ie6-ie8我们需要特殊处理,就让他们保持默认样式,这对于布局及样式上都要考虑到这一点. 首先看一下布局这一块,html代码如下: 复制代码 代码如下: <div c

  • JS组件Bootstrap导航条使用方法详解

    JS组件Bootstrap导航条使用方法详解

    导航条是在您的应用或网站中作为导航标头的响应式元组件. 1.默认的导航条 导航条在移动设备上可以折叠(并且可开可关),且在可用的视口宽度增加时变为水平展开模式 定制折叠模式与水平模式的阈值 根据你所放在导航条上的内容的长度,也许你需要调整导航条进入折叠模式和水平模式的阈值.通过改变@grid-float-breakpoint变量的值或加入您自己的媒体查询CSS代码均可实现你的需求. 第一步: 最外面的容器nav标签,并添加nav-bar样式类,表示这里面属于导航条 <nav class="

  • JS+CSS实现鼠标滑过时动态翻滚的导航条效果

    JS+CSS实现鼠标滑过时动态翻滚的导航条效果

    本文实例讲述了JS+CSS实现鼠标滑过时动态翻滚的导航条效果.分享给大家供大家参考.具体如下: 这是一款鼠标悬停时动态翻滚的导航条,注意这里用了两个背景图,请等待网页加载完成或多刷新几次,这个是使用JavaScript实现的,不过代码好像是从jQuery里摘出来的,有点像. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-mouse-over-nav-scroll-style-codes/ 具体代码如下: <!DOCTYPE htm

  • 仿客齐集首页导航条DIV+CSS+JS [代码实例]

    仿客齐集首页导航条DIV+CSS+JS [代码实例]

    作者子鼠 客齐集首页的一个效果, 今天有人问我是怎么写的,于是晚上就又重写了一个; 顺便把那个布局再理一下:  你可以先看一下客齐集首页的效果:http://shanghai.kijiji.cn 我试着不用position:absolute的方法: 但写起来太难了: 后来还是用position:absolute了: 但在客齐集站上的是没有用的:真不知道当时是怎么写出来的:以下是效果图: 以下是布局部分 复制代码 代码如下: <div id="info">   <div

  • js实现横向拖拽导航条功能

    js实现横向拖拽导航条功能

    效果如下: 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>div横向拖拽排序</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <style type="text/cs

  • JS实现选中当前菜单后高亮显示的导航条效果

    JS实现选中当前菜单后高亮显示的导航条效果

    本文实例讲述了JS实现选中当前菜单后高亮显示的导航条效果.分享给大家供大家参考.具体如下: 这里演示选中当前菜单后,该菜单高亮显示,也就是说在不改变菜单CSS代码的情况下,用JavaScript去控制菜单的背景,如果该菜单项被点击后,将赋予它一个与众不同的背景颜色或背景图像,这样可以清淅的指引用户下在浏览的网站栏目,本菜单不需要动态语言的加入,简单方便而且效果好. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-cho-nav-gl-sho

随机推荐