首页 > 代码库 > js实现导航栏的吸顶操作

js实现导航栏的吸顶操作

2024-09-12 20:38:58   216人阅读

  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实现导航栏的吸顶操作


联系
我们