直接上源码，基于jquery写的，可以直接跑起来。

原理是先计算出页面元素对应的高度。页面滚动时计算tab对应的高端区间，设置具体的tab。欢迎指正

下载地址

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

        <style type="text/css">

            @charset "utf-8";

            ::-webkit-scrollbar {

                width: 0px;

            }

            body, ul, li, ol, div, p, nav {

                margin: 0px;

                padding: 0px;

                box-sizing: border-box;

                -moz-box-sizing: border-box;

                /* Firefox */

                -webkit-box-sizing: border-box;

                /* Safari */

                font-family:"微软雅黑", "Arial";

            }

            html {

                height: 100%;

            }

            body {

                color: #5d5d5d;

                background-color: #fff;

                max-width: 800px;

                width: 100%;

                height: 100%;

                margin: 0 auto;

            }

            a {

                text-decoration: none;

                color: #5d5d5d;

            }

            input, button, select, textarea {

                outline: none;

            }

            #nav {

                clear: both;

                width: 100%;

                max-width: 800px;

                height: 36px;

                padding: 5px 7px;

                border-bottom: 1px solid #ECECEC;

                background: #fff;

            }

            #nav.fix {

                position: fixed;

                z-index: 999;

                top: 0;

            }

            #nav nav {

                width: 100%;

                overflow: hidden;

            }

            #nav nav ul {

                white-space: nowrap;

                overflow-x: scroll;

                font-size: 0;

            }

            #nav nav ul li {

                color: #7E7E7E;

                display: inline-block;

                font-size: 13px;

                line-height: 18px;

                background-color: #F6F6F6;

                padding: 5px 10px;

                margin-right: 8px;

                -webkit-border-radius: 5px;

                border-radius: 5px;

            }

            #nav nav ul li.cur {

                background-color: #F4333B;

            }

            #nav nav ul li.cur a {

                color: #fff;

            }

            .main {

                margin-top: 36px;

            }

            .conts {

                height: 800px;

                background-color: #610004;

            }

            .conts > p {

                color: #F4333B;

                height: 40px;

                line-height: 40px;

                width: 100%;

                background-color: #007AFF;

                display: block;

                text-align: center;

            }

            .contsx {

                height: 500px;

                background-color: #C9C9C9;

            }

            .contsx > p {

                color: #E4E4E4;

                height: 40px;

                line-height: 40px;

                width: 100%;

                background-color: blue;

                display: block;

                text-align: center;

            }

        </style>

    </head>

    <body>

        <div id="nav" class="fix">

            <nav>

                <ul class="J_navtab">

                    <li class="tab cur"><a href="#111" data-href="111">这是第一个</a></li>

                    <li class="tab"><a href="#222" data-href="222">这是第2个</a></li>

                    <li class="tab"><a href="#333" data-href="333">这是第3个</a></li>

                    <li class="tab"><a href="#444" data-href="444">这是第4个</a></li>

                    <li class="tab"><a href="#555" data-href="555">这是第5个</a></li>

                    <li class="tab"><a href="#666" data-href="666">这是第6个</a></li>

                </ul>

            </nav>

        </div>

        <div class="main">

            <div class="conts" data-nav="111">

                <p>111</p>

            </div>

            <div class="conts" data-nav="222">

                <p>22</p>

            </div>

            <div class="conts" data-nav="333">

                <p>33</p>

            </div>

            <div class="conts" data-nav="444">

                <p>4444</p>

            </div>

            <div class="conts" data-nav="555">

                <p>555555</p>

            </div>

            <div class="conts" data-nav="666">

                <p>666666</p>

            </div>

        </div>

        <script type="text/javascript">

            var $navList = $('.J_navtab .tab'),

                $conts = $('.conts'),

                curNav = 0,

                navHeight = 36,

                clientW = document.body.clientWidth;

            var contTopList = [],posiLeftList=[];

            $conts.each(function(i) {

                contTopList.push($(this).position().top - navHeight);

            });

            $navList.each(function(){

                posiLeftList.push($(this).position().left);

            });

            console.log("contTopList---,", contTopList);

            console.log("posiLeftList---,", posiLeftList);

            var len = contTopList.length;

            $(document).on('scroll', function(e) {

                var _scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

                for (var i = 0; i < len; i++) {

                    if (_scrollTop < contTopList[i]) {

                        changeNav(0);

                        break;

                    } else if (_scrollTop >= contTopList[len - 1]) {

                        changeNav(len - 1);

                        break;

                    } else if (_scrollTop > contTopList[i - 1] && _scrollTop < contTopList[i + 1]) {

                        changeNav(i);

                        break;

                    }

                }

            });

            /**

             * 切换tab

             * @param {Object} index

             */

            function changeNav(index) {

                console.log("当前第 ", index," 个");

                if (index != curNav) {

                    $navList.eq(index).addClass('cur').siblings().removeClass('cur');

                    //tab对应滚动到最中间

                    $('.J_navtab').scrollLeft(posiLeftList[index] - (clientW / 2) + ($navList.eq(index).outerWidth() / 2));

                }

                curNav = index;

            }

            $navList.on('touchend',function(e){

                var navHref = $(this).find('a').attr('data-href');

                $('html,body').scrollTop($(".conts[data-nav='"+navHref+"']").position().top - navHeight);

//                $('html,body').scrollTop(contTopList[$(this).index()]);

            });

        </script>

    </body>

</html>

jquery 页面滚动tab自动定位，tab与内容对应的更多相关文章

  1. jQuery页面滚动监听事件及高级效果插件

    jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scrol ...

  2. jquery页面滚动显示浮动菜单栏锚点定位效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. jquery页面滚动到指定id

    //jquery页面滚动到指定id  $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html ...

  4. Jquery页面滚动动态加载数据，页面下拉自动加载内容

    <!DOCTYPE=html> <html> <head> <script src="js/jquery.js" type="t ...

  5. jquery 页面滚动到底部自动加载插件集合

    很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载更多的内容.下面为你推荐 10 个 jQuery 的无限滚动的插件: 1. jQuery ScrollPa ...

  6. jQuery页面滚动底部加载数据

    $(window).scroll(function () {        var scrollTop = $(this).scrollTop();        var scrollHeight = ...

  7. jquery页面滚动，菜单固定到顶部

    // 菜单固定 $(function(){ //获取要定位元素距离浏览器顶部的距离 var navH = $("#topp").offset().top; //滚动条事件 $(wi ...

  8. jQuery页面滚动图片等元素动态加载实现

    一.关于滚动显屏加载 常常会有这样子的页面,内容很丰富,页面很长,图片较多.比如说光棍节很疯狂的淘宝商城页面. 或者是前段时间写血本买了个高档耳机的京东商城页面,或者是新浪微博之类. 这些页面图片数量 ...

  9. [转]jQuery页面滚动图片等元素动态加载实现

    本文转自:http://www.zhangxinxu.com/wordpress/?p=1259 一.关于滚动显屏加载 常常会有这样子的页面,内容很丰富,页面很长,图片较多.比如说光棍节很疯狂的淘宝商 ...

随机推荐

  1. No-2.注释

    01. 注释的作用 使用用自己熟悉的语言,在程序中对某些代码进行标注说明,增强程序的可读性 02. 单行注释(行注释) 以 # 开头,# 右边的所有东西都被当做说明文字,而不是真正要执行的程序,只起到 ...

  2. HttpClient 学习整理 (转)

    source:http://www.blogjava.net/Alpha/archive/2007/01/22/95216.html HttpClient 是我最近想研究的东西,以前想过的一些应用没能 ...

  3. [Python3网络爬虫开发实战] 2.2-网页基础

    用浏览器访问网站时,页面各不相同,你有没有想过它为何会呈现这个样子呢?本节中,我们就来了解一下网页的基本组成.结构和节点等内容. 1. 网页的组成 网页可以分为三大部分——HTML.CSS和JavaS ...

  4. HTML5地理定位-Geolocation API

    HTML5提供了一组Geolocation API,来自navigator定位对象的子对象,获取用户的地理位置信息Geolocation API使用方法:1.判断是否支持 navigator.geol ...

  5. odoo 权限配置讲解

    今天来讲解一下odoo权限配置的简单讲解,配合公司开发的权限模块的使用,进行odoo权限配置的说明 BaseSecurityExtend 2.0模块 这是公司自主开发的一款针对odoo菜单级别进行可视 ...

  6. Linux最常用的基础命令 上篇

    Linux最常用的基础命令个人总结 计算机基础知识 32bit和64bit系统的区别.系统运行机制 1989年python 诞生 C语言是编译型的语言,不太支持跨平台 Django 江购 32bit= ...

  7. http chunked 理解

    https://imququ.com/post/transfer-encoding-header-in-http.html #! /usr/bin/python #coding:utf8 import ...

  8. 关于SELECT 逻辑的执行顺序问题

    不会有大多数人都和我一样的认为,是先进行的Where 剔除结果集,再进行Join的吧 SQL server 2014 逻辑执行标准: https://msdn.microsoft.com/en-us/ ...

  9. CF-697B Barnicle与691C Exponential notation

    无聊写两个题解吧,上午做比赛拉的,感触很多! B. Barnicle time limit per test 1 second memory limit per test 256 megabytes ...

  10. HDU1811 并查集+拓扑排序

    题目大意: 判断是否能根据给定的规则将这一串数字准确排序出来 我们用小的数指向大的数 对于相等的情况下,将二者合并到同一个并查集中,最后抽象出来的图上面的每一个点都应该代表并查集的标号 #includ ...