前端开发——吸顶灯效果

功能实现：当鼠标滚动时，导航栏吸附在顶端
方法：通过鼠标滚动事件+固定布局（fixed）

html：

<div class="example">
</div>
<!-- 导航栏 --><div id="nav"><div class="container"><div class="nav_left left"><img src="img/logo.png"></div><ul class="right"><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><li><a href="#">软件商店</a></li><li><a href="#">ColorOS</a></li></ul></div></div>

css：

*{margin: 0;padding: 0;
}
ul,ol{list-style-type: none;/* 去除列表标志 */
}
body{width:100%;height:800px;}
a{/* 超链接不要有下划线 */text-decoration: none;
}
/* 设置浮动定位 */
.left{float: left;
}
.right{float: right;
}
.container{margin: 0 auto;width:100%;
}
.example{height:20px;background-color:green;
}
/* 设置导航栏 */
#nav{width: 100%;height:80px;background-color: rgb(238, 238, 238);
}
#nav ul{line-height: 80px;
}
#nav li{float: left;margin: 0 10px;
}
#nav a{color: rgb(102, 102, 102);font-weight: bold;font-size: 14px;
}
#nav a:hover{color:rgb(0, 146, 95);
}

js：

<script type="text/javascript">//页面加载后执行window.onload = function () {//找网页中的导航栏，实现吸顶灯效果var nav=document.getElementById("nav");var navTop=nav.offsetTop;//获取距离顶端的距离// console.log(navTop);window.onscroll=function(){var backTop = document.documentElement.scrollTop || document.body.scrollTop;//吸顶灯效果if(backTop>=navTop){nav.style.position="fixed";nav.style.top="0";nav.style.left="0";nav.style.zIndex="100";}else{nav.style.position="";}}}</script>

完整代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>吸顶灯效果</title>
<style>
*{margin: 0;padding: 0;
}
ul,ol{list-style-type: none;/* 去除列表标志 */
}
body{width:100%;height:800px;}
a{/* 超链接不要有下划线 */text-decoration: none;
}
/* 设置浮动定位 */
.left{float: left;
}
.right{float: right;
}
.container{margin: 0 auto;width:100%;
}
.example{height:20px;background-color:green;
}
/* 设置导航栏 */
#nav{width: 100%;height:80px;background-color: rgb(238, 238, 238);
}
#nav ul{line-height: 80px;
}
#nav li{float: left;margin: 0 10px;
}
#nav a{color: rgb(102, 102, 102);font-weight: bold;font-size: 14px;
}
#nav a:hover{color:rgb(0, 146, 95);
}
</style>
</head>
<body>
<div class="example">
</div>
<!-- 导航栏 --><div id="nav"><div class="container"><div class="nav_left left"><img src="img/logo.png"></div><ul class="right"><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><li><a href="#">软件商店</a></li><li><a href="#">ColorOS</a></li></ul></div></div>
<script type="text/javascript">//页面加载后执行window.onload = function () {//找网页中的导航栏，实现吸顶灯效果var nav=document.getElementById("nav");var navTop=nav.offsetTop;//获取距离顶端的距离// console.log(navTop);window.onscroll=function(){var backTop = document.documentElement.scrollTop || document.body.scrollTop;//吸顶灯效果if(backTop>=navTop){nav.style.position="fixed";nav.style.top="0";nav.style.left="0";nav.style.zIndex="100";}else{nav.style.position="";}}}</script>
</body>
</html>

实现效果：

第一张：初始状态
第二张：滑动鼠标后，导航栏呈现吸附在顶端效果

前端开发——吸顶灯效果相关推荐

html时钟翻牌效果,前端开发翻牌效果
前端高级开发视频|前端开发做单个页面|前端开发用低压还是标压处理器思路: 最基本的思路:点击一张图片时,该张图片就要隐藏掉,把下方的图片显示出来. 效果:翻牌的效果,以图片中轴为基准,实现旋转的翻牌 ...
前端开发推荐-创建一个精美的jquery图片库效果
在Web和图形设计的世界,jquery它是使用最广泛的技术. 在他的帮助下,我们可以创建很多伟大的事情.丰富的jQuery插件,在互联网上,使我们能够毫不费力地创建幻灯片,表格,动画和其他各种良好的效 ...
JS实现仿新浪微博大厅和腾讯微博首页滚动效果_前端开发
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
html 图片自动滚动播放,CSS3如何实现图片滚动播放效果（附代码）_WEB前端开发...
什么是h5制作?_WEB前端开发 h5制作的意思是H5广告,大多是在微信上宣传营销使用的,而HTML5是第五代HTML的标准,可以说,H5都是基于 HTML5 实现的,包括目前我们看到的大部分网页,基 ...
html5艺术字效果,WEB前端开发，网络特殊字体的制作工具-font-spider
font-spider 前端开发字体的好工具 HTML5学堂:font-spider是业界首款中文 WebFont 本地自动化压缩与转码工具.利用它不但能帮你轻松解决字体文件的兼容问题,并能自动检索找 ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYP ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个可拖动的拼图游戏动画效果~适合初学者~超简单~ |it前端开发
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个可拖动的拼图游戏动画效果~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!D ...
【前端实例代码】使用 HTML CSS 和 JavaScript 实现具有彩色发光霓虹灯效果的数字时钟|前端开发网页制作基础入门教程
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+vuejs+elementui 制作一个响应式后台管系统网页界面~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: ...
【前端实例代码】霓虹灯按钮动画效果悬停2| html CSS特效惊艳| 前端开发网页制作基础入门教程
b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停2| html CSS特效惊艳| 前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYPE html> ...

前端开发——吸顶灯效果

前端开发——吸顶灯效果

前端开发——吸顶灯效果相关推荐

最新文章

热门文章