1.  <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2.  
  3.  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  4.  <html>
  5.  <head>
  6.  <style type="text/css">
  7.      body {
  8.          padding:0;
  9.          margin:0;
  10.      }
  11.      #nav {
  12.          width:100%;
  13.          height:60px;
  14.          background:#39f;
  15.          color:#fff;
  16.          line-height:60px;
  17.          text-align:center;
  18.          padding:0;
  19.          margin:0;
  20.          list-style:none;
  21.      }
  22.      #nav li {
  23.          float:left;
  24.          width:20%;
  25.          height:60px;
  26.      }
  27.      .fix {
  28.          position:fixed;
  29.          top:0;
  30.          left:0;
  31.      }
  32.  </style>
  33.  </head>
  34.  
  35.  <div class="wrap">
  36.      <h1>在线书城</h1>
  37.      <p>有没有一本书让你仿佛遇到春风十里</p>
  38.      <ul id="nav">
  39.          <li>加入购物车</li>
  40.          <li>加入收藏</li>
  41.          <li>立即购买</li>
  42.      </ul>
  43.      <div class="con">
  44.          <p>好书有好事有好诗</p>
  45.          <p>好书有好事有好诗</p>
  46.          <p>好书有好事有好诗</p>
  47.          <p>好书有好事有好诗</p>
  48.          <p>好书有好事有好诗</p>
  49.          <p>好书有好事有好诗</p>
  50.          <p>好书有好事有好诗</p>
  51.          <p>好书有好事有好诗</p>
  52.          <p>好书有好事有好诗</p>
  53.          <p>好书有好事有好诗</p>
  54.          <p>好书有好事有好诗</p>
  55.          <p>好书有好事有好诗</p>
  56.          <p>好书有好事有好诗</p>
  57.          <p>好书有好事有好诗</p>
  58.          <p>好书有好事有好诗</p>
  59.          <p>好书有好事有好诗</p>
  60.          <p>好书有好事有好诗</p>
  61.          <p>好书有好事有好诗</p>
  62.          <p>好书有好事有好诗</p>
  63.          <p>好书有好事有好诗</p>
  64.          <p>好书有好事有好诗</p>
  65.          <p>好书有好事有好诗</p>
  66.          <p>好书有好事有好诗</p>
  67.          <p>好书有好事有好诗</p>
  68.          <p>好书有好事有好诗</p>
  69.          <p>好书有好事有好诗</p>
  70.          <p>好书有好事有好诗</p>
  71.      </div>
  72.  </div>
  73.  
  74.  <script type="text/javascript">
  75.  var tit = document.getElementById("nav");
  76.  //alert(tit);
  77.  //占位符的位置
  78.  var rect = tit.getBoundingClientRect();//获得页面中导航条相对于浏览器视窗的位置
  79.  var inser = document.createElement("div");
  80.  tit.parentNode.replaceChild(inser,tit);
  81.  inser.appendChild(tit);
  82.  inser.style.height = rect.height + "px";
  83.  
  84.  //获取距离页面顶端的距离
  85.  var titleTop = tit.offsetTop;
  86.  //滚动事件
  87.  document.onscroll = function(){
  88.      //获取当前滚动的距离
  89.      var btop = document.body.scrollTop||document.documentElement.scrollTop;
  90.      //如果滚动距离大于导航条据顶部的距离
  91.      if(btop>titleTop){
  92.          //为导航条设置fix
  93.          tit.className = "clearfix fix";
  94.      }else{
  95.          //移除fixed
  96.          tit.className = "clearfix";
  97.      }
  98.  }
  99.  </script>
  100.  </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. pdf2swf+flexpaper解决pdf在线阅读（类百度文库）

    1:工具准备swftools.exe 下载 http://www.swftools.org/download.html 安装至D盘 SWFTools提供了一系列将各种文件转成swf的工具: font2 ...

  2. python中的列表和字典(二)

    三. 字典以及相关使用 1. 字典的定义 dict{} 2. 字典特征:字典是无序的,key-value键值对形式,key值不重复 3. 字典的赋值:dictA = {keyA: valueA, ke ...

  3. js 去除字符串两边的空格

    js 去除字符串两边的空格 function trim(str){ //删除左右两端的空格          return str.replace(/(^\s*)|(\s*$)/g, "&q ...

  4. UVALive - 4126 Password Suspects (AC自动机+状压dp)

    给你m个字符串,让你构造一个字符串,包含所有的m个子串,问有多少种构造方法.如果答案不超过42,则按字典序输出所有可行解. 由于m很小,所以可以考虑状压. 首先对全部m个子串构造出AC自动机,每个节点 ...

  5. Spring通过XML方式实现定时任务

    package com.wisezone.service; import java.text.SimpleDateFormat; import java.util.Date; import org.s ...

  6. LeetCode Relative Ranks

    原题链接在这里:https://leetcode.com/problems/relative-ranks/#/description 题目: Given scores of N athletes, f ...

  7. npm镜像安装

    安装淘宝NPM镜像 https://npm.taobao.org/ npm install -g cnpm --registry=https://registry.npm.taobao.org 配置 ...

  8. RequireJS 也可以引入 VUE

    RequireJS 也可以引入 VUE 由于 FastAdmin 是使用 RequireJS 导入 JS 模块的. 有人想把 VUE 也引入进去,虽然说也是可以,VUE 还是推荐使用 Webpack ...

  9. Vue 中的 computed 和 methods

    Vue 中的 computed 和 methods 使用 computed 性能会更好. 如果你不希望缓存,可以使用 methods 属性.

  10. Kerberos的hive链接问题

    javax.security.auth.login.LoginException: Checksum failed 之前碰到过类似的问题,都是因为服务器端的keytab问题:多半是因为重新生成了key ...