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

效果如图

<!DOCTYPE html>

<html>

  <head>

    <title>导航跟随</title>

    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

    <script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>

  </head>

 <style>

        #nav {

            display: -webkit-box;

            display: -ms-flexbox;

            display: -webkit-flex;

            display: flex;

            line-height: 30px;

            font-size: 14px;

            width: 100%;

            position: fixed;

            top: 0px;

            left: 0px;

            z-index: 100;

            border-bottom: 1px solid #e5e5e5;

            border-top: 1px solid #e5e5e5;

            min-height: 44px;

            background: #000;

        }

            #nav a {

                display: block;

                position: relative;

                width: 25%;

                line-height: 44px;

                text-align: center;

                color: #fff;

            }

                #nav a.active {

                    color: #fff;

 background: red;

                }

        #main {

            padding-top: 44px;

        }

</style>

 <script>

        $(window).load(function () {

            $('html, body').animate({ scrollTop: 0 }, 200);

            var nav = $("#nav");

            var mainPage = $(".mainPage");

            var mainTopArr = new Array();

            for (var i = 0; i < mainPage.length; i++) {

                var top = mainPage.eq(i).offset().top;

                mainTopArr.push(top);

            }

            $(window).scroll(function () {

                var scrollTop = $(this).scrollTop();

                var k;

                for (var i = 0; i < mainTopArr.length; i++) {

                    if (scrollTop + 144 >= mainTopArr[i]) {

                        k = i;

                    }

                }

                nav.find("a").eq(k).addClass("active").siblings().removeClass("active");

            });

            nav.find("a[href^='#']").click(function (e) {

                e.preventDefault();

                $('html, body').animate({ scrollTop: $(this.hash).offset().top - 144 }, 200);

            });

        });

    </script>

  <body>

    <div id="nav">

      <a href="#imgdetails" class="active">商品</a>

          <a href="#specifications">规格</a>

          <a href="#reviews">评价</a>

          <a href="#description">详情</a>

    </div>

 <div id="main">

        <div class="mainPage" id="imgdetails"style="height:500px">我是第一块的内容</div>

    <div class="mainPage" id="specifications" style="height:500px">我是第二块的内容</div>

    <div class="mainPage" id="reviews" style="height:500px">我是所有评论啦，来看评论</div>

    <div class="mainPage" id="description" style="height:500px">我是介绍，来看介绍</div>

  </body>

</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. iOS开发黑科技之runtime

    iOS 开发之黑科技-runtime runtime其实就是oc底层的一套C语音的API 调用方法的本质就是发消息, 1.动态交换两个方法的实现(特别是交换系统自动的方法) 2.动态添加对象的成员变量 ...

  2. 用pyqt5简单实现Mqtt调试助手-初学python

    最近在学习pyqt5,因为我们是做远程物联网设备的,所以就做个mqtt调试助手来练手.第一次做这种程序,没有加异常处理,会有很多不足,欢迎留言拍砖,直接上代码了 这个是程序入口, # 使用前先安装py ...

  3. C++走向远洋——66（十五周阅读程序）

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

  4. 压力测试（三）-自定义变量和CSV可变参数实操

    1.Jmeter用户自定义变量实战 简介:什么是用户自定义变量,怎样使用 为什么使用:很多变量在全局中都有使用,或者测试数据更改,可以在一处定义,四处使用 比如服务器地址 1.线程组->add ...

  5. 微信小程序学习简介

    如何向微信小程序导入DEMO源码: 参考方法 参考学习小程序官方文档 小程序官方文档 小程序目录简介 app.json :设置一些工程全局的量.js : 写一些函数逻辑.wxml: 调用.js中写的函 ...

  6. mysql 常用获取时间sql语句

    --当年第一天: SELECT DATE_SUB(CURDATE(),INTERVAL dayofyear(now())-1 DAY); --当年最后一天: SELECT concat(YEAR(no ...

  7. Yuchuan_Linux_C 编程之十一 进程间通信

    一.整体大纲 二.进程间通信概念及方法  Linux环境下,进程地址空间相互独立,每个进程各自有不同的用户地址空间.任何一个进程的全局变量在另一个进程中都看不到,所以进程和进程之间不能相互访问,要交换 ...

  8. RestTemplate 负载均衡原理

    RestTemplate 是通过拦截器改变请求的URI的方式来指定服务器的,此处将通过一个自定义LoadBalanced的方式来进行说明 1.导入jar包 <parent> <gro ...

  9. Java 抽象类 抽象方法 使用说明

    知识点 什么是抽象类 抽象类与普通类主要两点不同: 1.在类的修饰符后面多了一个abstract关键字 2.抽象类是不允许通过new来实例化的 由于抽象类不能通过new来实例化,所以基本上是在继承中当 ...

  10. 痞子衡嵌入式：恩智浦SDK驱动代码风格检查工具预览版

    大家好,我是痞子衡,是正经搞技术的痞子. 接上文 <恩智浦SDK驱动代码风格.模板.检查工具> 继续聊,是的,过去的三天里我花了一些时间做了一个基于 PyQt5 的 GUI 工具,可以帮助 ...