js实现导航栏的吸顶操作
Posted 恶魔、天使与码农
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js实现导航栏的吸顶操作相关的知识，希望对你有一定的参考价值。
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 3 4 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 5 <html> 6 <head> 7 <style type="text/css"> 8 body { 9 padding:0; 10 margin:0; 11 } 12 #nav { 13 width:100%; 14 height:60px; 15 background:#39f; 16 color:#fff; 17 line-height:60px; 18 text-align:center; 19 padding:0; 20 margin:0; 21 list-style:none; 22 } 23 #nav li { 24 float:left; 25 width:20%; 26 height:60px; 27 } 28 .fix { 29 position:fixed; 30 top:0; 31 left:0; 32 } 33 </style> 34 </head> 35 36 <div class="wrap"> 37 <h1>在线书城</h1> 38 <p>有没有一本书让你仿佛遇到春风十里</p> 39 <ul id="nav"> 40 <li>加入购物车</li> 41 <li>加入收藏</li> 42 <li>立即购买</li> 43 </ul> 44 <div class="con"> 45 <p>好书有好事有好诗</p> 46 <p>好书有好事有好诗</p> 47 <p>好书有好事有好诗</p> 48 <p>好书有好事有好诗</p> 49 <p>好书有好事有好诗</p> 50 <p>好书有好事有好诗</p> 51 <p>好书有好事有好诗</p> 52 <p>好书有好事有好诗</p> 53 <p>好书有好事有好诗</p> 54 <p>好书有好事有好诗</p> 55 <p>好书有好事有好诗</p> 56 <p>好书有好事有好诗</p> 57 <p>好书有好事有好诗</p> 58 <p>好书有好事有好诗</p> 59 <p>好书有好事有好诗</p> 60 <p>好书有好事有好诗</p> 61 <p>好书有好事有好诗</p> 62 <p>好书有好事有好诗</p> 63 <p>好书有好事有好诗</p> 64 <p>好书有好事有好诗</p> 65 <p>好书有好事有好诗</p> 66 <p>好书有好事有好诗</p> 67 <p>好书有好事有好诗</p> 68 <p>好书有好事有好诗</p> 69 <p>好书有好事有好诗</p> 70 <p>好书有好事有好诗</p> 71 <p>好书有好事有好诗</p> 72 </div> 73 </div> 74 75 <script type="text/javascript"> 76 var tit = document.getElementById("nav"); 77 //alert(tit); 78 //占位符的位置 79 var rect = tit.getBoundingClientRect();//获得页面中导航条相对于浏览器视窗的位置 80 var inser = document.createElement("div"); 81 tit.parentNode.replaceChild(inser,tit); 82 inser.appendChild(tit); 83 inser.style.height = rect.height + "px"; 84 85 //获取距离页面顶端的距离 86 var titleTop = tit.offsetTop; 87 //滚动事件 88 document.onscroll = function(){ 89 //获取当前滚动的距离 90 var btop = document.body.scrollTop||document.documentElement.scrollTop; 91 //如果滚动距离大于导航条据顶部的距离 92 if(btop>titleTop){ 93 //为导航条设置fix 94 tit.className = "clearfix fix"; 95 }else{ 96 //移除fixed 97 tit.className = "clearfix"; 98 } 99 } 100 </script> 101 </html>
当页面向下滚动时超过了吸顶导航的初始位置时，需要把吸顶导航栏固定在窗口顶部，一般吸顶导航栏还可以替换成文章标题栏，搜索框、tab条等等，例如百度糯米，天猫，淘宝最为常用。它们共同点是在内容或者功能上比较重要，但又不是最重要的元素，最重要的一般会放置于顶部。
1.实现思路是监听 scroll 事件，判断当前页面的滚动位置，当滚动距离大于导航条距顶部的距离时，为导航条采用窗口定位。
2.与“回到顶部“的实现方法一样，但是会发现实现吸顶功能时，到了临界位置时，页面会抖动一下，因为当导航条fixed出去，下部内容填补了导航条离开的位置。抢占了导航条的位置，所以抖动了一下。此处我们设置一个占位符，守住导航条的位置。
效果如下：
以上是关于js实现导航栏的吸顶操作的主要内容，如果未能解决你的问题，请参考以下文章
如何为导航到实现底部导航栏的活动中的上一个片段进行后推操作？