<%@ 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. 262. Trips and Users

    问题描述 解决方案 -- case when 的效率比if的效率高 -- select Trips.Request_at as 'Day', -- round(sum(case Trips.Statu ...

  2. GridView1 footer求和

    // ShowFooter="True" private double sum = 0;//取指定列的数据和,你要根据具体情况对待可能你要处理的是int protected voi ...

  3. SecureCrt 连接Redhat linux

    1.Vmware虚机设置网络模式为桥接Bridge.保证linux中能ping通windows,windows中也能ping通linux. 2.修改sshd_config文件,命令为:vi /etc/ ...

  4. linux 下安装rar解压

    在liunx下原本是不支持rar文件的,需要安装liunx下的winrar版本,操作如下 wget http://www.rarsoft.com/rar/rarlinux-4.0.1.tar.gz t ...

  5. Magic Index 寻找数组中A[i]=i的位置（原题转自微信号待字闺中）

    有一个有意思的题目叫做Magic Index:给定一个数组A,其中有一个位置被称为Magic Index,含义是:如果i是Magic Index,则A[i] = i.假设A中的元素递增有序.且不重复, ...

  6. NET Core 2.0利用MassTransit集成RabbitMQ

    NET Core 2.0利用MassTransit集成RabbitMQ https://www.cnblogs.com/Andre/p/9579764.html 在ASP.NET Core上利用Mas ...

  7. java多线程并发去调用一个类的静态方法安全性探讨

    java多线程并发去调用一个类的静态方法安全性探讨 转自:http://blog.csdn.net/weibin_6388/article/details/50750035   这篇文章主要讲多线程对 ...

  8. IntelliJ IDEA 代码检查规范QAPlug

    转自:http://blog.csdn.net/jizi7618937/article/details/51500725 Avoid Array Loops 数组之间的拷贝使用System.array ...

  9. 关于overflow:hidden

    (本文只针对hidden这个值的用处进行阐述) 关于overflow:hidden;很多人都知道他是溢出隐藏的一个属性,但是并不是很多人知道它的一些神奇的地方!首先先讲一下众所周知的溢出隐藏吧! 溢出 ...

  10. [Wc2009]shortest

    传送门 终于把这题过了,了了我两年前写堵塞的交通一晚上无果的心结 因为是6要注意蛇皮走位啊!!这种-> S //Achen #include<bits/stdc++.h> #defi ...