<%@ 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. 【codesmith】 初次试用（未发布）

      一直都有听过codesmith,一个很好用的软件,减少大量代码的输入,比如你生成一个list,并添加5个项. ArrayList list1=new ArrayList(); list1.Add( ...

  2. 习题练习-第1章ASP.NET MVC概述

    一.选择题 1.ASP.NET MVC自2007年首次公布预览以来,作为(    )的替代品,普及度已明显提高,现在很多大型Web应用程序都是使用这一技术构建的. A.ASP    B.ASP.NET ...

  3. python中sort()方法的cmp参数

    <python基础编程>里有讲到一段高级排序: “如果希望元素能按照特定的方式进行排序(而不是sort函数默认的方式,即根据python的默认排序规则按升序排列元素,第5章内对此进行讲解) ...

  4. 解决：在Eclipse中运行monkeyrunner脚本报错: IOError: (2, 'File not found - D:\\workspace\\monkeyrunner_test01 (\u62d2\u7edd\u8bbf\u95ee\u3002)')

    在eclipse中搭建运行monkeyrunner脚本的环境,请见lynnLi的博客monkeyrunner之eclipse中运行monkeyrunner脚本之环境搭建(四) 但在实践中,状况确实层出 ...

  5. ASP.NET MVC架构模式

    一.是什么? MVC,即(Model-View-Controller,模型—视图—控制器模式),和三层类似,用于表示一种软件架构模式.在这种模式下,将系统的实现分为模型Model,视图View,控制器 ...

  6. hdu5087 Revenge of LIS II (dp)

    只要理解了LIS,这道题稍微搞一下就行了. 求LIS(最长上升子序列)有两种方法: 1.O(n^2)的算法:设dp[i]为以a[i]结尾的最长上升子序列的长度.dp[i]最少也得是1,就初始化为1,则 ...

  7. Java 利用Gson将json字符串转换为List<Map<String, String>>

    json字符串类似于: [ { "userPhone": "123", "userNo": "123-2", " ...

  8. [独孤九剑]Oracle知识点梳理（一）表空间、用户

    本系列链接导航: [独孤九剑]Oracle知识点梳理(一)表空间.用户 [独孤九剑]Oracle知识点梳理(二)数据库的连接 [独孤九剑]Oracle知识点梳理(三)导入.导出 [独孤九剑]Oracl ...

  9. HIVE-执行distribute by时报错的解决过程---之如何分析hive执行的错误并解决

    在执行一条HIVE语句的时候报了以下错误,重新检查了所有步骤,重启所有服务,发现没有问题. 但发现一个有趣的事情 1,select sno,sname,sex,sage,sdept from stud ...

  10. [调试日志]用php函数var_export把多维数组file_put_contents写入并打印到日志，以方便调试之多维数组，用php5中的var_export函数示例,顺带介绍http_build_query(转)

    一行解决写入日志: file_put_contents("/tmp/jack.txt", var_export($layReturnArr,TRUE),FILE_APPEND); ...