想做一个导航跟随，但是代码都要下载，自己简单些了一个，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. C++中如何对单向链表操作

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

  2. 下一代网际协议IPv6

    下一代网际协议IPv6 一.解决 IP 地址耗尽的措施 从计算机本身发展以及从因特网规模和网络传输速率来看,现在 IPv4 已很不适用. 最主要的问题就是 32 位的 IP 地址不够用. 在 2019 ...

  3. Spring Cloud Feign 组成和配置

    Feign的组成 接口 作用 默认值 Feign.Builder Feign的入口 Feign.Builder Client Feign底层用什么去请求 和Ribbon配合时:LoadBalancer ...

  4. poi简介

    POI简介(用于操作Excel) 1 Java Aspose Cells Java Aspose Cells 是一种纯粹的Java授权的Excel API,开发和供应商Aspose发布.这个API的最 ...

  5. OpenFlow(OVS)下的“路由技术”

    前言 熟悉这款设备的同学,应该也快到不惑之年了吧!这应该是Cisco最古老的路由器了.上个世纪80年代至今,路由交换技术不断发展,但是在这波澜壮阔的变化之中,总有一些东西在嘈杂的机房内闪闪发光,像极了 ...

  6. createjs的compositeOperation在Android和IOS上接受的参数居然不一样

    例如 目标.compositeOperation = 如果是安卓? "darken" : "darker";

  7. Codeforces Round #626 (Div. 2, based on Moscow Open Olympiad in Informatics)

    A. Even Subset Sum Problem 题意 给出一串数,找到其中的一些数使得他们的和为偶数 题解 水题,找到一个偶数或者两个奇数就好了 代码 #include<iostream& ...

  8. Object-Oriented Programming Summary Ⅳ

    目录 UML单元总结博客 总结本单元两次作业的设计 总结自己在四个单元中架构设计以及OO方法理解的演进 总结自己在四个单元中测试理解与实践的演进 总结自己的课程收获 立足于自己的体会给课程组提三个具体 ...

  9. 利用iTunes给MP3添加专辑插图

    利用iTunes给MP3添加专辑插图 打开iTunes 准备好没有专辑插图的mp3文件和插图 将准备好的mp3文件拖入iTunes 右键菜单选择专辑信息选项 在专辑信息里面选择插图 点击左下角的添加插 ...

  10. 一起了解 .Net Foundation 项目 No.15

    .Net 基金会中包含有很多优秀的项目,今天就和笔者一起了解一下其中的一些优秀作品吧. 中文介绍 中文介绍内容翻译自英文介绍,主要采用意译.如与原文存在出入,请以原文为准. NUnit Test Fr ...