原生js实现吸顶导航和回到顶部特效
2016-05-07 00:43
696 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>吸顶导航特效</title> <style type="text/css"> body{ margin: 0; padding: 0; } .main{ width: 100%; background: #ccc; margin: 10px auto 0; position: relative; } .content{ width: 100%; height: 400px; background: #0FF2D8; margin: 10px auto 0; line-height: 400px; } .navigation{ width: 100%; height: 40px; background: #E589B4; margin: auto 0; top: 400px; left: 0; position: absolute; } .tab{ width: 180px; height: 40px; background: #DB3179; float: left; margin-left: 5px; line-height: 40px; text-align: center; } #div1{ width: 100px; height: 100px; background: green; position: fixed; bottom: 0; right: 0; display: none; line-height: 100px; text-align: center; } </style> <script type="text/javascript"> window.onload = function(){ var navigaOffsetTop = 0; function my_getElementsByClassName(class_name){ var arr = []; elements = document.getElementsByTagName('*'); for (var i = 0; i < elements.length; i++) { if(elements[i].className == class_name){ arr[arr.length] = elements[i]; } } return arr; } //导航条悬停在顶部 function navigaStayTop(){ var navigationBar = []; if(document.getElementsByClassName){ navigationBar = document.getElementsByClassName('navigation'); }else{ //非标准IE下 navigationBar = my_getElementsByClassName('navigation'); } var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; if (scrollTop > navigaOffsetTop){ navigationBar[0].style.top = scrollTop + "px"; } else{ navigationBar[0].style.top = navigaOffsetTop + "px"; } } //给导航条上七个tab加上点击事件 var tabs = []; if(document.getElementsByClassName){ tabs = document.getElementsByClassName('tab'); }else{ tabs = my_getElementsByClassName("tab"); } var contents = []; if (document.getElementsByClassName) { contents = document.getElementsByClassName('content'); } else{ //Ie contents = my_getElementsByClassName('content'); }; tabs[0].onclick=function(){ window.scrollTo(0, contents[2].offsetTop); } tabs[1].onclick=function(){ window.scrollTo(0, contents[3].offsetTop); } tabs[2].onclick=function(){ window.scrollTo(0, contents[4].offsetTop); } tabs[3].onclick=function(){ window.scrollTo(0, contents[5].offsetTop); } tabs[4].onclick=function(){ window.scrollTo(0, contents[6].offsetTop); } tabs[5].onclick=function(){ window.scrollTo(0, contents[7].offsetTop); } tabs[6].onclick=function(){ window.scrollTo(0, contents[8].offsetTop); } //获取页面上导航条到顶部的位置 var navigationBar = []; if (document.getElementsByClassName) { navigationBar = document.getElementsByClassName('navigation'); } else{ navigationBar = my_getElementsByClassName('navigation'); } navigaOffsetTop = navigationBar[0].offsetTop; //给滚动条以及鼠标加上滚动事件 // window.onscroll= naviga_stay_top; // document.onmousewheel= navigaStayTop; if(window.attachEvent){ window.attachEvent("onmousewheel", navigaStayTop); window.attachEvent("onscroll", navigaStayTop); document.attachEvent("onmousewheel", navigaStayTop); document.attachEvent("onscroll", navigaStayTop); }else{ window.addEventListener("mousewheel", navigaStayTop,false); window.addEventListener("scroll", navigaStayTop,false); document.addEventListener("mousewheel", navigaStayTop,false); document.addEventListener("scroll", navigaStayTop,false); } //回到顶部 var div1 = document.getElementById('div1'); window.onscroll = function(){ var t = window.pageYOffset; if (t>200) { div1.style.display = 'block'; } else{ div1.style.display = 'none'; } } div1.onclick = function(){ window.scrollTo(0,0); } } </script> </head> <body> <div class="main"> <div class="content">1</div> <div id="nav" class="navigation"> <div class="tab">概念</div> <div class="tab">设计</div> <div class="tab">功能</div> <div class="tab">操作系统</div> <div class="tab">技术规格</div> <div class="tab">购买方式</div> <div class="tab">付款方式</div> </div> <div class="content">2</div> <div class="content">3</div> <div class="content">4</div> <div class="content">5</div> <div class="content">6</div> <div class="content">7</div> <div class="content">8</div> <div class="content">9</div> <div class="content">10</div> </div> <div id="div1">回到顶部</div> </body> </html>
效果图:
相关文章推荐
- js 常见事件
- js内置对象总结
- js点击按钮倒计时---servlet并接收
- js Dom对象的属性与方法
- 4、js内置函数
- JavaScript的Backbone.js框架入门学习指引
- 深入解析Backbone.js框架的依赖库Underscore.js的作用
- JavaScript的Backbone.js框架环境搭建及Hellow world示例
- Backbone.js框架中Model与Collection的使用实例
- js实现上传图片及时预览
- javascript表单处理具体实现代码(表单、链接、按钮)
- 基于javascript实现图片滑动效果
- JavaScript放头部不执行的情况(针对新手)
- javaScript 操作Css样式
- js的for,if写在函数外
- JS数据类型
- js 宿主对象的属性和方法总结
- 13、JavaScript进度条的实现
- JavaScript实现绑定DOM的定时器插件
- 12、JavaScript中定时器setInterval()的用法