1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>吸顶导航特效</title>
  6     <style type="text/css">
  7     body{  8         margin: 0;
  9         padding: 0;
 10     }
 11     .main{ 12         width: 100%;
 13         background: #ccc;
 14         margin: 10px auto 0;
 15         position: relative;
 16     }
 17     .content{ 18         width: 100%;
 19         height: 400px;
 20         background: #0FF2D8;
 21         margin: 10px auto 0;
 22         line-height: 400px;
 23
 24     }
 25     .navigation{ 26         width: 100%;
 27         height: 40px;
 28         background: #E589B4;
 29         margin:  auto 0;
 30         top: 400px;
 31         left: 0;
 32         position: absolute;
 33     }
 34     .tab{ 35         width: 180px;
 36         height: 40px;
 37         background: #DB3179;
 38         float: left;
 39         margin-left: 5px;
 40         line-height: 40px;
 41         text-align: center;
 42     }
 43     #div1{ 44         width: 100px;
 45         height: 100px;
 46         background: green;
 47         position: fixed;
 48         bottom: 0;
 49         right: 0;
 50         display: none;
 51         line-height: 100px;
 52         text-align: center;
 53
 54     }
 55     </style>
 56     <script type="text/javascript">
 57     window.onload = function(){
 58         var navigaOffsetTop = 0;
 59         function my_getElementsByClassName(class_name){
 60             var arr = [];
 61             elements = document.getElementsByTagName('*');
 62             for (var i = 0; i < elements.length; i++) {
 63                 if(elements[i].className == class_name){
 64                     arr[arr.length] = elements[i];
 65
 66                 }
 67             }
 68             return arr;
 69         }
 70         //导航条悬停在顶部
 71         function navigaStayTop(){
 72             var navigationBar = [];
 73             if(document.getElementsByClassName){
 74                 navigationBar = document.getElementsByClassName('navigation');
 75             }else{
 76                 //非标准IE下
 77                 navigationBar = my_getElementsByClassName('navigation');
 78             }
 79             var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
 80             if (scrollTop > navigaOffsetTop){
 81                 navigationBar[0].style.top = scrollTop + "px";
 82             } else{
 83                 navigationBar[0].style.top = navigaOffsetTop + "px";
 84             }
 85         }
 86         //给导航条上七个tab加上点击事件
 87         var tabs = [];
 88         if(document.getElementsByClassName){
 89             tabs = document.getElementsByClassName('tab');
 90         }else{
 91             tabs = my_getElementsByClassName("tab");
 92         }
 93
 94         var contents = [];
 95         if (document.getElementsByClassName) {
 96             contents = document.getElementsByClassName('content');
 97
 98         } else{
 99             //Ie
100             contents = my_getElementsByClassName('content');
101         };
102         tabs[0].onclick=function(){
103         window.scrollTo(0, contents[2].offsetTop);
104         }
105         tabs[1].onclick=function(){
106         window.scrollTo(0, contents[3].offsetTop);
107         }
108         tabs[2].onclick=function(){
109         window.scrollTo(0, contents[4].offsetTop);
110         }
111         tabs[3].onclick=function(){
112         window.scrollTo(0, contents[5].offsetTop);
113         }
114         tabs[4].onclick=function(){
115         window.scrollTo(0, contents[6].offsetTop);
116         }
117         tabs[5].onclick=function(){
118         window.scrollTo(0, contents[7].offsetTop);
119         }
120         tabs[6].onclick=function(){
121         window.scrollTo(0, contents[8].offsetTop);
122         }
123
124         //获取页面上导航条到顶部的位置
125         var navigationBar = [];
126         if (document.getElementsByClassName) {
127             navigationBar = document.getElementsByClassName('navigation');
128
129         } else{
130             navigationBar = my_getElementsByClassName('navigation');
131
132         }
133         navigaOffsetTop = navigationBar[0].offsetTop;
134
135
136         //给滚动条以及鼠标加上滚动事件
137         // window.οnscrοll= naviga_stay_top;
138         // document.onmousewheel= navigaStayTop;
139         if(window.attachEvent){
140             window.attachEvent("onmousewheel", navigaStayTop);
141             window.attachEvent("onscroll", navigaStayTop);
142
143             document.attachEvent("onmousewheel", navigaStayTop);
144             document.attachEvent("onscroll", navigaStayTop);
145
146         }else{
147             window.addEventListener("mousewheel", navigaStayTop,false);
148             window.addEventListener("scroll", navigaStayTop,false);
149
150             document.addEventListener("mousewheel", navigaStayTop,false);
151             document.addEventListener("scroll", navigaStayTop,false);
152
153         }
154         //回到顶部
155         var div1 = document.getElementById('div1');
156         window.onscroll = function(){
157             var t = window.pageYOffset;
158             if (t>200) {
159                 div1.style.display = 'block';
160
161             } else{
162                 div1.style.display = 'none';
163
164             }
165         }
166         div1.onclick = function(){
167             window.scrollTo(0,0);
168         }
169
170
171     }
172     </script>
173 </head>
174 <body>
175     <div class="main">
176         <div class="content">1</div>
177             <div id="nav" class="navigation">
178                 <div class="tab">概念</div>
179                 <div class="tab">设计</div>
180                 <div class="tab">功能</div>
181                 <div class="tab">操作系统</div>
182                 <div class="tab">技术规格</div>
183                 <div class="tab">购买方式</div>
184                 <div class="tab">付款方式</div>
185             </div>
186         <div class="content">2</div>
187         <div class="content">3</div>
188         <div class="content">4</div>
189         <div class="content">5</div>
190         <div class="content">6</div>
191         <div class="content">7</div>
192         <div class="content">8</div>
193         <div class="content">9</div>
194         <div class="content">10</div>
195     </div>
196     <div id="div1">回到顶部</div>
197 </body>
198 </html>

效果图：

转载于:https://www.cnblogs.com/jiechen/p/5467582.html

原生js实现吸顶导航和回到顶部特效相关推荐

  1. 使用原生js实现吸顶功能

    文章目录 前言 一.思路 二.实现 1.绑定动态组件 2.mounted绑定事件 3.方法的实现 4.销毁事件 总结 前言 吸顶功能在前端中很常见,这里以小米为例,在滚动前是这样的 当页面下拉到一定程 ...

  2. 原生js实现吸顶效果

    什么是吸顶效果: css中固定定位(fixed)实现的效果就是吸顶效果 那么如何用js去操作. 代码如下 <style>* {margin: 0px;padding: 0px;}.top ...

  3. 监听scroll实现吸顶导航

    window.addEventListener():事件监听 . offsetLeft和offsetTop:元素到offsetParent左边或者顶部的距离. offsetParent:距离元素最近的 ...

  4. 超好用的移动端布局自适应大小rem判断js文件及超过一定高度回到顶部按钮代码...

    //以下代码放到一个adapt.js文件当中 (function (doc, win) {var docEl = doc.documentElement,resizeEvt = 'orientatio ...

  5. BackToTop.js 为你的网站添加“回到顶部”按钮

    图片来源:Inspiring Wallpapers 就像上图中的超人一样,你的读者也想要一飞冲天的感觉. 没错,你的网站需要一个 "回到顶部" 的按钮. 每当你的文章写得很长,或者 ...

  6. 原生JS实现点击导航栏鼠标左右滑动（适用于PC端和移动端）

    效果图: 点击导航栏左右拖动 代码: CSS: <style>.navBar {width: 1200px;margin-left: 25px;margin-top: 40px;margi ...

  7. 微信小程序导航头部吸顶效果

    功能描述:当页面滚动到该元素的时候,变成固定的导航头部,也就是固定在最上面,当往回滑动时又变成原来的样子. 基本原理是: 1.获取要吸顶元素到页面顶部的高度 2.监听页面已经滚动的高度 3.将要吸顶元 ...

  8. 【Vue3】电商网站吸顶功能

    头部分类导航-吸顶功能 电商网站的首页内容会比较多,页面比较长,为了能让用户在滚动浏览内容的过程中都能够快速的切换到其它分类.需要分类导航一直可见,所以需要一个吸顶导航的效果. 目标:完成头部组件吸顶 ...

  9. vue3实现吸顶效果

    一.HTML 用样式控制,如果isFixed 等于true,将内容固定到顶部 <div :class="isFixed ? 'is-fixed' : 'txt'" ref=& ...

  10. 原生JS实现加载进度条

    分享一个原生JS实现的动态加载进度条特效,效果如下: 实现的代码如下: <!DOCTYPE html> <html><head><meta http-equi ...

最新文章

  1. Linux命令：tar命令批量解压方法总结
  2. 利用定时器做防止误触发功能以及多久后执行某个事件
  3. [BZOJ3631][JLOI2014]松鼠的新家
  4. SNMP功能开发简介 四 net-snmp动态监听自定义端口
  5. Java提升篇：对象克隆（复制）
  6. [WARNING] Using platform encoding (UTF-8 actually) to copy filtered resources, i.e. build is platfor
  7. iOS,Objective-C Runtime
  8. 05.html学习-表单
  9. mysql游标表间数据迁移_MySQL存储过程--通过游标遍历和异常处理迁移数据到历史表...
  10. HTML标签的分类与特点
  11. 自动驾驶—— Image Caption的学习笔记(legacy)
  12. 【RLchina第四讲】Model-Based Reinforcement Learning
  13. spring实现在一个类中调用另一个类的方法
  14. GPGGA \ GPRMC 格式解析
  15. ygbook小说网站源码 自动采集赚钱源码 ThinkPHP+MYSQL开发
  16. NAND Flash控制器功能
  17. python儿童编程培训
  18. SSRF-服务器端请求伪造(类型和利用方法)第2部分
  19. 静态代理，JDK动态代理，Cglib动态代理详解
  20. 职业学校计算机知识,中等职业学校计算机教学大纲.doc

热门文章

  1. 我妈劝我找份稳定的工作
  2. [bzoj4945][Noi2017]游戏
  3. python操作excel的读写
  4. win10 打开注册表
  5. 夺标查询和联合查询有什么区别么
  6. 802.11 对于multicast 和 broadcast的处理
  7. Winform 中tabcontrol 美化
  8. js中邦定事件与解绑支持匿名函数
  9. quartus编译出现的问题
  10. 在slackware 10下安顿Oracle 10