<%@ 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. Codeforces 870E Points, Lines and Ready-made Titles：并查集【两个属性二选一】

    题目链接:http://codeforces.com/problemset/problem/870/E 题意: 给出平面坐标系上的n个点. 对于每个点,你可以画一条经过这个点的横线或竖线或什么都不画. ...

  2. <a>标签点击不跳转

    HTML中的<a></a>标签点击不跳转的方法 一.<a href="####" ></a> 使用这个方法我们会发现<a hr ...

  3. hdu 2490 队列优化dp

    http://acm.hdu.edu.cn/showproblem.php?pid=2490 Parade Time Limit: 4000/2000 MS (Java/Others)    Memo ...

  4. MySql简单分页存储过程

    BEGIN DECLARE startIndex int; select COUNT(*) INTO RecordCount from test; SET startIndex = (PageInde ...

  5. 基于vue的滚动条组件之--element隐藏组件滚动条scrollbar使用

    在项目中,总是需要用到滚动条,但windows浏览器默认的滚动条是很丑的,为了页面美观,可以考虑优化滚动条样式.  vue Element UI官方文档上并没有放出滚动条相关的示例说明,但是实际上是有 ...

  6. Win7+VS2010下配置WTL开发环境

    一.今天Win7下刚装了VS2010,解压wtl81_12085.zip到C盘根目录,进入C:\wtl81_12085\AppWiz下,执行setup100.js提示向导安装成功. 在VS2010中新 ...

  7. nyoj-130-相同的雪花(hash)

    题目链接 /* Name:NYOJ-130-相同的雪花 Copyright: Author: Date: 2018/4/14 15:13:39 Description: 将雪花各个分支上的值加起来,h ...

  8. k-means算法的优缺点以及改进

    大家接触的第一个聚类方法,十有八九都是K-means聚类啦.该算法十分容易理解,也很容易实现.其实几乎所有的机器学习和数据挖掘算法都有其优点和缺点.那么K-means的缺点是什么呢? 总结为下: (1 ...

  9. tableau学习笔记—1

    第一部分 第一章 数据可视化 1.1 用数据讲故事 1.2 数据不只是数字 1.3 在数据中寻找什么(关系.模式.异常) 第二章 Tableau概述 2.1 Tableau概述 2.2 产品简介 第三 ...

  10. Flea

    It is known that fleas in Berland can jump only vertically and horizontally, and the length of the j ...