原生js实现吸顶导航和回到顶部特效

 <!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写的贪吃蛇网页版游戏特效
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...
js 实现吸顶效果 || 小程序的吸顶效果
小程序吸顶效果  <view class="container"> <view class='outside-img ...
js悬浮吸顶
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>吸顶和锚点链接</t ...
js之吸顶效果
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
用原生JS实现的一个导航下拉菜单，下拉菜单的宽度与浏览器视口的宽度一样（js+html+css）
这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽:一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现.在本案例中通过改变二级导航的高度来实现二级导航的显示和消 ...
使用『jQuery』『原生js』制作一个导航栏动效 —— { }
效果 HTML部分 <body> <nav> <div id="nav1">导航1</div> <div id="n ...
模仿jquery--offset方法。原生JS获取任意元素到文档document顶部的距离
1.通过遍历目标节点.目标节点的父节点,依次溯源. 然后累加这些节点到其最近可定位的祖先节点的距离.向上直到document. 其中,需要使用到节点的offsetTop/offsetLeft属性,来获 ...
react 吸顶实现
今天获取到一个需求,其实就是吸顶的需求,页面下滑,某一块dom隐藏时发生吸顶现象.这种特效其实老生常谈了,但是在这次做的时候,突发奇想,能否将其做成一个 hook ,从而实现出传递ref即可使得 do ...
js实现导航栏的吸顶操作
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

随机推荐

【转】Android仿QQ截图应用测试
使用过QQ的同学应该都用过QQ截图,Ctrl+Alt+A进入截图操作,通过拉伸,移动高亮区域的框体可以快速截取我们需要的图片.在android应用中,我们也经常需要截图操作,以下实现了一个类似QQ截图 ...
hdu4485 B-Casting(mod运算)
B-Casting Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...
poj 1149 Pigs 网络流-最大流建图的题目（明天更新）-已更新
题目大意:是有M个猪圈,N个顾客,顾客要买猪,神奇的是顾客有一些猪圈的钥匙而主人MIRKO却没有钥匙,多么神奇?顾客可以在打开的猪圈购买任意数量的猪,只要猪圈里有足够数量的猪.而且当顾客打开猪圈后mi ...
OpenFileDialog
打开一个文件 private void button1_Click(object sender, EventArgs e) { openFile ...
四种可变交流swap方法
1.void swap(int &x, int &y){ int temp=x; x=y; y=temp; } 2.void swap(int &x, int &y){ ...
MYSQL 专家 ----zhaiwx_yinfeng
http://mysqllover.com/?p=708 https://yq.aliyun.com/articles/54454 http://blog.csdn.net/zhaiwx1987/ar ...
float与double的范围和精度（摘录）
什么是浮点数在计算机系统的发展过程中,曾经提出过多种方法表达实数.典型的比如相对于浮点数的定点数(Fixed Point Number).在这种表达方式中,小数点固定的位于实数所有数字中间的某个位置. ...
MSDN无法显示该页的解决办法
今天打开msdn,发现查阅api时候出现 “无法显示该页的解决办法“ 这个问题.解决方案如下: 在“运行”中输入regsvr32 "C:\Program Files\Common Fil ...
PND_白盾
RMQ问题与ST算法
RMQ(Range Minimum/Maximum Query)问题是求区间最值问题. 对于长度为 n 的数组 A,进行若干次查询,对于区间 [L,R] 返回数组A中下标在 [L,R] 中的最小(大) ...

原生js实现吸顶导航和回到顶部特效

原生js实现吸顶导航和回到顶部特效的更多相关文章

随机推荐

热门专题