技法80 (◐‿◑) 页面悬浮导航 | 【复刻HTML99】

不二如是

                               
登录/注册后可看大图

按照提示，完成代码，秀秀你的编程能力！

不许看答案，否则打屁屁

---

分析：

在很多长页面中，为了让导航条总是显示在可视范围内，需要让导航条悬浮。

   

---

Code：

HTML：

1. <div id='suspendNavigation'>
   
2.     <h2>页面悬浮导航</h2>
   
3.     <span id="tst"></span>
   
4.     <div><a href='http://www.fishc.com' target="_blank">导航1</a></div>
   
5.     <div><a href='http://www.fishc.com' target="_blank">导航2</a></div>
   
6.     <div><a href='http://www.fishc.com' target="_blank">导航3</a></div>
   
7.     <span id="tst"></span>
   
8.     <span id="tst1"></span>
   
9. </div>
   
10. <div class="content">
    
11.     <!-- lorem假文，专门用来填充页面的 -->
    
12.     <p>Welcom to FishC.com
    
13.         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    
14.     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    
15.     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    
16.     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    
17.     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    
18.     proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
19. </div>

复制代码

CSS：

1. <style>
   
2. 
   
3.     a{
   
4.         text-decoration:none;
   
5.     }
   
6.     /*===================页面悬浮导航=======================*/
   
7.     /*设置导航栏初始布局*/
   
8.     #suspendNavigation{
   
9.         top:0;
   
10.         position: absolute;
    
11.         background-color: #ccc;
    
12.         width: 100%;
    
13.         height: auto;
    
14. 
    
15.     }
    
16. 
    
17. /*设置导航栏固定样式，通过下方js代码才会触发*/
    
18. /*默认<div id='suspendNavigation'>标签没有.fix类*/
    
19. /*触发条件后，该标签会有class="fix",然后出发固定操作*/
    
20.     #suspendNavigation.fix{
    
21.         opacity:0.7;
    
22.         z-index: 1111;
    
23.         width: 100%;
    
24.         position: fixed;
    
25.         top: 0;
    
26.     }
    
27. 
    
28. 
    
29.     /*设置导航栏中的div*/
    
30.     #suspendNavigation div{
    
31.         position: relative;
    
32.         float: left;
    
33.         border: #cc2123 1px solid;
    
34.         width: 33%;
    
35.         height: 30px;
    
36.         text-align: center;
    
37.         line-height: 30px;
    
38.     }
    
39.     /*设置文本基本样式*/
    
40.     .content{
    
41.         position: absolute;
    
42.         top:115px;
    
43.         height: 1999px;
    
44.     }
    
45. </style>

复制代码

JS：

1. <script type="text/javascript">
   
2. 
   
3.     // 按照id绑定dom元素，获取导航栏对象
   
4.     var suspendNavigation=document.getElementById("suspendNavigation");
   
5. // 获取对象相对于body元素距离顶端的高度。
   
6. // 此时为0
   
7.         var pagenav_top = suspendNavigation.offsetTop;
   
8.         // 滚动事件被触发
   
9.         window.onscroll = function(){
   
10.             // body对象距离距离顶部的滚动距离
    
11.             // 没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。
    
12.             var scrollTop = document.body.scrollTop;
    
13.             if(scrollTop < pagenav_top){
    
14.                 suspendNavigation.className = "";
    
15.             }else{
    
16.                 suspendNavigation.className = "fix";
    
17.             }
    
18.         }
    
19. </script>

复制代码

---

请按照自己的理解订正对概念的认知

代码说明（秀智商） ：

游客，如果您要查看本帖隐藏内容请回复

---

回顾：

技法79 (&#9680;&#8255;&#9681;)&#65279; 获得指定月份的天数

0 0 9 9 - 鱼C - 7周年庆典之“固定菜单”

---

源代码： 80.zip (1.61 KB, 下载次数: 11, 售价: 6 鱼币)

2017-11-23 15:32 上传

点击文件名下载附件

---

○面试题索引贴●

如果喜欢，请订阅 ：

HTML5 - 庖丁解牛 + JavaScript - 庖丁解牛

如果喜欢，别忘了评分 ：

                               
登录/注册后可看大图

lomiss

牛皮

我家的鸡8岁了

学习了

Ruide

Merci.

张悦颖

1

mhb789456

   学习中

yunying12321

学习

凌乱大帅比

gjgj

喝水从不拧瓶盖

啥时候能把源代码上上色呀，看到我好累呀

a211827754

emm

群里最菜的一个

哈哈

红蓝

康康

疯狂的二哈

感谢分享

笑死朕

666

zltzlt

这个神奇

zrfv

谢谢分享

weiter

666

笋头蒜头

dafad的辅导辅导

优时风

什么