<%@ 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. jsonp: js跨域

    JSONP是JSON with padding(填充式JSON或参数式JSON)的简写,是应用JSON的一种新方法,常用于服务器与客户端跨源通信,在后来的Web服务中非常流行.本文将详细介绍JSONP ...

  2. Memcached的特点和使用

    特点: Memcached是由Danga Interactive开发的,高性能的,分布式的内存对象缓存系统,用于在动态应用中减少数据库负载,提升访问速度 Memcached的缓存是一种分布式的,可以让 ...

  3. IE跨Iframe时Session丢失问题

    例如IIS下,可以打开IIS窗口——〉选择一个网站——〉属性——〉http头,增加一个http头 然后输入头名:P3P 输入头内容:CP=CAO PSA OUR 点评:与上一个方法类似,此方法也要求第 ...

  4. HANA aggregate 数字聚合

    在project 1 里面 具有服务店代码,金额.应该上一层aggregate 就自动聚合了.可是并没有.要自己手工设置一下.在columns 右键变成——convert to  aggregated ...

  5. Linux 线程同步的三种方法(互斥锁、条件变量、信号量)

    互斥锁 #include <cstdio> #include <cstdlib> #include <unistd.h> #include <pthread. ...

  6. SFTP服务器使用指南（1）——安装搭建freeSSHd

    为什么选择freeSSHd 此软件免费 功能非常丰富且强大,同时支持软件用户.本地系统用户和域用户验证 对各用户选择性开放SFTP,Telnet, Tunneling服务 功能和服务完全不受限制的使用 ...

  7. poj1325

    给出一系列任务,每个任务可以在机器A的某个模式,或者在机器B的某个模式下完成.机器A和B每切换一次模式需要重启一次.问完成这些任务,最少需要重启机器多少次? 把任务看作边 “重启”操作看作点 这道题就 ...

  8. SQL夯实基础（三）：聚合函数详解

    一.GROUP BY  Having 聊聚合函数,首先肯定要弄清楚group by 和having 的用法. SELECT id, COUNT(course) as numcourse, AVG(sc ...

  9. 【HTML5】Canvas绘制基础

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  10. 学习动态性能表(12)--v$db_object_cache

    学习动态性能表 第12篇--V$DB_OBJECT_CACHE  2007.6.4 本视图提供对象在library cache(shared pool)中对象统计,提供比v$librarycache更 ...