<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 <html>

 <head>

 <style type="text/css">

     body {

         padding:0;

         margin:0;

     }

     #nav {

         width:100%;

         height:60px;

         background:#39f;

         color:#fff;

         line-height:60px;

         text-align:center;

         padding:0;

         margin:0;

         list-style:none;

     }

     #nav li {

         float:left;

         width:20%;

         height:60px;

     }

     .fix {

         position:fixed;

         top:0;

         left:0;

     }

 </style>

 </head>

 <div class="wrap">

     <h1>在线书城</h1>

     <p>有没有一本书让你仿佛遇到春风十里</p>

     <ul id="nav">

         <li>加入购物车</li>

         <li>加入收藏</li>

         <li>立即购买</li>

     </ul>

     <div class="con">

         <p>好书有好事有好诗</p>

         <p>好书有好事有好诗</p>

         <p>好书有好事有好诗</p>

         <p>好书有好事有好诗</p>

         <p>好书有好事有好诗</p>

         <p>好书有好事有好诗</p>

         <p>好书有好事有好诗</p>

         <p>好书有好事有好诗</p>

         <p>好书有好事有好诗</p>

         <p>好书有好事有好诗</p>

         <p>好书有好事有好诗</p>

         <p>好书有好事有好诗</p>

         <p>好书有好事有好诗</p>

         <p>好书有好事有好诗</p>

         <p>好书有好事有好诗</p>

         <p>好书有好事有好诗</p>

         <p>好书有好事有好诗</p>

         <p>好书有好事有好诗</p>

         <p>好书有好事有好诗</p>

         <p>好书有好事有好诗</p>

         <p>好书有好事有好诗</p>

         <p>好书有好事有好诗</p>

         <p>好书有好事有好诗</p>

         <p>好书有好事有好诗</p>

         <p>好书有好事有好诗</p>

         <p>好书有好事有好诗</p>

         <p>好书有好事有好诗</p>

     </div>

 </div>

 <script type="text/javascript">

 var tit = document.getElementById("nav");

 //alert(tit);

 //占位符的位置

 var rect = tit.getBoundingClientRect();//获得页面中导航条相对于浏览器视窗的位置

 var inser = document.createElement("div");

 tit.parentNode.replaceChild(inser,tit);

 inser.appendChild(tit);

 inser.style.height = rect.height + "px";

 //获取距离页面顶端的距离

 var titleTop = tit.offsetTop;

 //滚动事件

 document.onscroll = function(){

     //获取当前滚动的距离

     var btop = document.body.scrollTop||document.documentElement.scrollTop;

     //如果滚动距离大于导航条据顶部的距离

     if(btop>titleTop){

         //为导航条设置fix

         tit.className = "clearfix fix";

     }else{

         //移除fixed

         tit.className = "clearfix";

     }

 }

 </script>

 </html>

当页面向下滚动时超过了吸顶导航的初始位置时，需要把吸顶导航栏固定在窗口顶部，一般吸顶导航栏还可以替换成文章标题栏，搜索框、tab条等等，例如百度糯米，天猫，淘宝最为常用。它们共同点是在内容或者功能上比较重要，但又不是最重要的元素，最重要的一般会放置于顶部。

1.实现思路是监听 scroll 事件，判断当前页面的滚动位置，当滚动距离大于导航条距顶部的距离时，为导航条采用窗口定位。

2.与“回到顶部“的实现方法一样，但是会发现实现吸顶功能时，到了临界位置时，页面会抖动一下，因为当导航条fixed出去，下部内容填补了导航条离开的位置。抢占了导航条的位置，所以抖动了一下。此处我们设置一个占位符，守住导航条的位置。

效果如下：

js实现导航栏的吸顶操作的更多相关文章

  1. 原生js实现导航栏吸顶

    实现滑动滚动条让导航栏吸顶原理:主要是通过监听scroll,设定一个滚动条垂直位移作为临界,让导航栏吸顶或者取消吸顶. 话不多说了,代码如下: window.onscroll = function ( ...

  2. 【2017-03-31】JS-DOM操作：操作属性、彩虹导航栏、定时器、操作内容、创建元素并添加、操作相关元素

    一.操作属性 1.什么是属性: <div class="div" id="div1" style="" ></div> ...

  3. js动态控制导航栏样式

    导航栏一般做为母版页,为了使增加用户体验,往往在用户进入某个页面给予导航栏相应的样式,这里可以用js动态添加 <div class="box_left fl"> < ...

  4. JS面向对象方法（一）： 使用原生JS 实现导航栏下多级分类弹出效果

    利用二级菜单的onmouseover/out事件 重新构建一级菜单 ".hover" 样式类 代码如下: CSS部分: 在原来的目标:hover样式中 增加 .hover状态 li ...

  5. JS自适应导航栏,菜单栏

    1. 打开 https://github.com/VPenkov/okayNav下载源代码 2.引入两个css样式 <link rel="stylesheet" href=& ...

  6. js滑动导航栏点击后居中效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 5行js代码搞定导航吸顶效果

    一.HTML布局 首先写HTML布局 <body> <div id="wrap"></div> </body> 二.CSS样式 给点 ...

  8. 在UWP中页面滑动导航栏置顶

    最近在研究掌上英雄联盟,主要是用来给自己看新闻,顺便copy个界面改一下段位装装逼,可是在我copy的时候发现这个东西 当你滑动到一定距离的时候导航栏会置顶不动,这个特性在微博和淘宝都有,我看了@ms ...

  9. UWP中使用Composition API实现吸顶（2）

    在上一篇中我们讨论了不涉及Pivot的吸顶操作,但是一般来说,吸顶的部分都是Pivot的Header,所以在此我们将讨论关于Pivot多个Item关联同一个Header的情况. 老样子,先做一个简单的 ...

随机推荐

  1. 使用PHP+Swoole实现的网页即时聊天工具：PHPWebIM

    使用PHP+Swoole实现的网页即时聊天工具 全异步非阻塞Server,可以同时支持数百万TCP连接在线 同时支持websocket+comet2种兼容协议,可用于所有种类的浏览器包括IE 拥有完整 ...

  2. InnoDB引擎的特点及优化方法

    1.什么是InnoDB引擎?      InnoDB引擎是MySQL数据库的另一个重要的存储引擎,正成为目前MySQL AB所发行的新版的标准,被包含在所有二进制安装包里,和其他存储引擎相比,Inno ...

  3. python数据类型、操作符

    python中数据类型包含:int,float,boolean,string,list(列表),set(集合),dictionary(字典) 数据类型转换: ①字符串 转 int:>>&g ...

  4. Gym - 101635K：Blowing Candles （简单旋转卡壳，求凸包宽度）

    题意:给定N个点,用矩形将所有点覆盖,要求矩形宽度最小. 思路:裸体,旋转卡壳去rotate即可. 最远距离是点到点:宽度是点到边. #include<bits/stdc++.h> #de ...

  5. HDFS超租约异常总结（org.apache.hadoop.hdfs.server.namenode.LeaseExpiredException）

    HDFS超租约异常总结(org.apache.hadoop.hdfs.server.namenode.LeaseExpiredException) 转载 2014年02月22日 14:40:58 96 ...

  6. 1117. Eddington Number(25)

    British astronomer Eddington liked to ride a bike. It is said that in order to show off his skill, h ...

  7. [Luogu4177][CEOI2008]order

    luogu sol 这题有点像网络流24题里面的太空飞行计划啊. 最大收益=总收益-最小损失. 先令\(ans=\sum\)任务收益. 源点向每个任务连容量为收益的边. 每个机器向汇点连容量为购买费用 ...

  8. poj2374 Fence Obstacle Course[线段树+DP]

    https://vjudge.net/problem/POJ-2374 吐槽.在这题上面磕了许久..英文不好题面读错了qwq,写了个错的算法搞了很久..A掉之后瞥了一眼众多julao题解,**,怎么想 ...

  9. RabbitMQ 权限分离&HA操作文档

    概要 默认情况下,使用帐号guest帐号登陆MQ,所有用户的queue信息,全部创建在根目录/的virtual host下,而这样,就会导致,任一用户登录后,都能看到其他用户的queue信息. 针对以 ...

  10. Oracle中查询前10条记录

    在Oracle怎样查询表中的top10条记录呢? select * from test where rownum <=10     ----说明:rownum只能用于<或<=运算,如 ...