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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
最近在研究用bootstrap搭建网站，Bootstrap能自适应pc端和手机端，并且移动设备优先，适合现如今移动营销，大家用的设备基本是触屏的了，能用滑动交互在小屏幕上体验会更好，那么如何实现呢？下面小编给大家介绍下bootstrap 手势滑动轮播图的实现方法2016-10-10
下面小编就为大家带来一篇全面了解函数声明与函数表达式、变量提升。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
这篇文章主要介绍了4种JavaScript实现简单tab选项卡切换的方法，感兴趣的小伙伴们可以参考一下2016-01-01
下面小编就为大家带来一篇JS 数字转换为大写金额的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
在JS编程中, 函数是一等公民, 具备了强大的灵活性和复用性，而柯里化作为一种高阶技术, 可以进一步提升函数的复用性和灵活性，在本篇博客中, 我们将深入探讨 JS 中柯里化的概念和原理, 并了解其在实际开发中的应用场景,需要的朋友可以参考下2023-06-06
本文通过实例代码给大家介绍了js开发中微信小程序自定义底部弹出框效果，非常不错，具有参考借鉴价值，需要的朋友参考下2016-12-12
javascript中alert()与console.log()的区别
我们在做js调试的时候使用 alert 可以显示信息，调试程序，alert 弹出窗口会中断程序， 如果要在循环中显示信息，手点击关闭窗口都累死。而且 alert 显示对象永远显示为[object ]。 自己写的 log 虽然可以显示一些 object 信息，但很多功能支持都没有 console 好2015-08-08
这篇文章主要为大家介绍了SVG快速构建马赛克效果示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
下面小编就为大家带来一篇对于Javascript 执行上下文的全面了解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
在vue项目中和后台交互获取数据这块,我们通常使用的是axios库,这篇文章主要给大家介绍了关于如何使用TS对axios的进行简单封装的相关资料,需要的朋友可以参考下2022-10-10
最新评论