想做一个导航跟随，但是代码都要下载，自己简单些了一个，css都放html里面了，所以也不用下载直接新建html，然后粘贴，点开就是导航跟随效果

效果如图

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>导航跟随</title>
  5.     <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  6.     <script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
  7.   </head>
  8.  <style>
  9.         #nav {
  10.             display: -webkit-box;
  11.             display: -ms-flexbox;
  12.             display: -webkit-flex;
  13.             display: flex;
  14.             line-height: 30px;
  15.             font-size: 14px;
  16.             width: 100%;
  17.             position: fixed;
  18.             top: 0px;
  19.             left: 0px;
  20.             z-index: 100;
  21.             border-bottom: 1px solid #e5e5e5;
  22.             border-top: 1px solid #e5e5e5;
  23.             min-height: 44px;
  24.             background: #000;
  25.         }
  26.  
  27.             #nav a {
  28.                 display: block;
  29.                 position: relative;
  30.                 width: 25%;
  31.                 line-height: 44px;
  32.                 text-align: center;
  33.  
  34.                 color: #fff;
  35.             }
  36.  
  37.                 #nav a.active {
  38.                     color: #fff;
  39.  background: red;
  40.                 }
  41.  
  42.         #main {
  43.             padding-top: 44px;
  44.         }
  45. </style>
  46.  <script>
  47.         $(window).load(function () {
  48.             $('html, body').animate({ scrollTop: 0 }, 200);
  49.             var nav = $("#nav");
  50.             var mainPage = $(".mainPage");
  51.             var mainTopArr = new Array();
  52.             for (var i = 0; i < mainPage.length; i++) {
  53.                 var top = mainPage.eq(i).offset().top;
  54.                 mainTopArr.push(top);
  55.             }
  56.             $(window).scroll(function () {
  57.                 var scrollTop = $(this).scrollTop();
  58.  
  59.                 var k;
  60.                 for (var i = 0; i < mainTopArr.length; i++) {
  61.                     if (scrollTop + 144 >= mainTopArr[i]) {
  62.                         k = i;
  63.                     }
  64.                 }
  65.                 nav.find("a").eq(k).addClass("active").siblings().removeClass("active");
  66.             });
  67.             nav.find("a[href^='#']").click(function (e) {
  68.                 e.preventDefault();
  69.                 $('html, body').animate({ scrollTop: $(this.hash).offset().top - 144 }, 200);
  70.             });
  71.         });
  72.     </script>
  73.   <body>
  74.     <div id="nav">
  75.       <a href="#imgdetails" class="active">商品</a>
  76.           <a href="#specifications">规格</a>
  77.           <a href="#reviews">评价</a>
  78.           <a href="#description">详情</a>
  79.     </div>
  80.  <div id="main">
  81.         <div class="mainPage" id="imgdetails"style="height:500px">我是第一块的内容</div>
  82.     <div class="mainPage" id="specifications" style="height:500px">我是第二块的内容</div>
  83.     <div class="mainPage" id="reviews" style="height:500px">我是所有评论啦，来看评论</div>
  84.     <div class="mainPage" id="description" style="height:500px">我是介绍，来看介绍</div>
  85.   </body>
  86. </html>

本来是想用document.ready，但是应用到实际中有页面包含了很多绝对定位的元素，定位并不准确。

jq 导航跟随 模拟京东手机端的更多相关文章

  1. jq判断是PC还是手机端的方法

    $(function(){ //判断是否是手机 var mobile_flag = isMobile(); if(mobile_flag){ $('.now_qq').attr('href',&quo ...

  2. 手机端调用app导航

    因为是在微信端中操作,所以只能使用腾讯地图才能调起手机的腾讯地图app <!doctype html> <html> <head> <meta charset ...

  3. 第九十二节，html5+css3移动手机端流体布局，开篇知识

    html5+css3移动手机端流体布局,开篇知识 将项目设计成移动端可访问的页面,项目采用的是流体布局.也就是宽度以百分比自适应的,因为手机的屏幕大小不一致  一．整体设计     首先 我们要了解一 ...

  4. 原生js实现响应式轮播图，支持电脑端点击切图，手机端滑动切图

    轮播图的实现原理并不难,但是步骤有些繁琐.最近练习了一个轮播图,大部分是跟着网上的教程写的,然后自己做了一点兼容ie8的修改,加了点击切换图片的特效和手机端的滑动特效,让这个轮播图可以在响应式的网站中 ...

  5. 手机端页面rem自适应脚本

    什么是rem 参照 web app变革之rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对 ...

  6. 适应手机端的jQuery图片滑块动画DEMO演示

    在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  7. 涨姿势！手机端的META你知道多少？

    一.天猫 <title>天猫触屏版</title> <meta content="text/html; charset=utf-8" http-equ ...

  8. 手机端的META你有多了解？

    我们先来简单了解下meta标签:meta指元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. 标签位于文档的头部,不包含任何内容. 标签的属性定 ...

  9. 第九十四节，html5+css3移动手机端流体布局，旅游部分，媒体查询

    html5+css3移动手机端流体布局,旅游部分,媒体查询 媒体查询 媒体查询是手机网站和自适应网站的重要部分,媒体查询可以根据不同的屏幕大小,做响应的处理,如文字的大小,区块隐藏等等 媒体查询,这里 ...

随机推荐

  1. 联想拯救者y7000使用体验

    前言 我以前的电脑是在电商平台买的二手电脑,期间觉得软件的运行速度慢,又在网上买了一个128G的固态硬盘安装上.就从大一到大四上学期这么使用了三年半的时间.因为自己需要运行一些吃内存的软件,而我的这个 ...

  2. C++走向远洋——34（友元函数，成员函数和一般函数的区别）

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:youyuan.cpp * 作者:常轩 * 微信公众号:Worl ...

  3. 1——PHP常见的系统常量

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...

  4. marquee上下无缝滚动

    <!DOCTYPE html><html><head><meta charset="utf-8"><meta name=&qu ...

  5. Ueditor富文本编辑器--上传图片自定义上传操作

    最近负责将公司官网从静态网站改版成动态网站,方便公司推广营销人员修改增加文案,避免官网文案维护过于依赖技术人员.在做后台管理系统时用到了富文本编辑器Ueditor,因为公司有一个阿里云文件资源服务器, ...

  6. NLP（二十二）利用ALBERT实现文本二分类

      在文章NLP(二十)利用BERT实现文本二分类中,笔者介绍了如何使用BERT来实现文本二分类功能,以判别是否属于出访类事件为例子.但是呢,利用BERT在做模型预测的时候存在预测时间较长的问题.因此 ...

  7. 学习Vue.js-Day2

    书接上文/思考反馈 react,ng,vue作用差不多,那各个都有什么特点啊,实际工作中应该用哪一个? 答:其实在实际工作中,组员会通过讨论而选择框架:这三个框架都能解放你的工作量,也适合做单页面应用 ...

  8. DEX文件解析---2、Dex文件checksum(校验和)解析

    一.checksum介绍     checksum(校验和)是DEX位于文件头部的一个信息,用来判断DEX文件是否损坏或者被篡改,它位于头部的0x08偏移地址处,占用4个字节,采用小端序存储.     ...

  9. python自动化第二课 - python基础2

    1.判断奇数偶数 num = input("请输入一个数字,判断是否为偶数:") print(not int(num) % 2) 2.浮点数的高精度计算用Decimal(from ...

  10. 1分钟,带你上手“Markdown”语法

    前言 Markdown 是一种轻量级的标记语言,有 John Gruber 以及Aaron Hillel Swartz 一起编写.Aaron Hillel Swartz 是一个极富传奇的黑客,有兴趣可 ...