Javascript原生代码实现导航栏滚动跟随效果
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Javascript原生代码实现导航栏滚动跟随效果</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
.content
{
width: 640px;
height: 1800px;
margin: 0 auto;
background-color: #f5f5f5;
}
.nav
{
line-height: 40px;
width: 640px;
height: 40px;
background-color: #333;
}
.nav li
{
position: relative;
float: left;
width: 25%;
list-style: none;
text-align: center;
color: #fff;
}
.nav li:after
{
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 1px;
height: 20px;
margin: auto;
background-color: #999;
}
.nav li:last-child:after
{
display: none;
}
.placehold
{
width: 100%;
height: 80px;
background-color: red;
}
/*动画效果*/
.slideDown
{
-webkit-animation: slideDown .5s linear;
animation: slideDown .5s linear;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes slideDown
{
0%
{
-webkit-transform: translateY(-2rem);
}
100%
{
-webkit-transform: translateY(0);
}
}
</style>
</head>
<body>
<div class="content">
<!--占位-->
<div class="placehold"></div>
<!--代码主体-->
<div class="nav" id="nav">
<ul>
<li>足球</li>
<li>篮球</li>
<li>苹果</li>
<li>芒果</li>
</ul>
</div>
</div>
<script>
function flexScroll(target_id,topEle){
window.onscroll=function(){
var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
var scrollNav=document.getElementById(target_id);
if(scrollTop>topEle){
scrollNav.classList.add('slideDown');
scrollNav.style.position="fixed";
scrollNav.style.top="0";
}else{
scrollNav.classList.remove('slideDown');
scrollNav.style.position="static";
}
}
}
//调用
flexScroll('nav',80);
</script>
</body>
</html>
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，请不要用于商业用途！
3. 如果你也有好源码或者教程，可以到审核区发布，分享有金币奖励和额外收入！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，默认解压密码为"Yongwp.com",如遇到无法解压的请联系管理员！
WordPress外贸建站 » Javascript原生代码实现导航栏滚动跟随效果
2. 分享目的仅供大家学习和交流，请不要用于商业用途！
3. 如果你也有好源码或者教程，可以到审核区发布，分享有金币奖励和额外收入！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，默认解压密码为"Yongwp.com",如遇到无法解压的请联系管理员！
WordPress外贸建站 » Javascript原生代码实现导航栏滚动跟随效果
