直接上源码，基于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. Getting start with dbus in systemd (02) - How to create a private dbus-daemon

    Getting start with dbus in systemd (02) 创建一个私有的dbus-daemon (session) 环境 这里我们会有两个app: app1(client),ap ...

  2. pycharm 破解

    亲测有效! http://blog.lanyus.com/archives/174.html 备注: 注册码破解链接:http://idea.lanyus.com/ 将下载的jar包放入PyCharm ...

  3. 21反射、动态代理、枚举、Filter

    2018/10/08 1.反射 Constructor Class类的newInstance()方法是使用该类无参的构造函数创建对象, 如果一个类没有无参的构造函数, 就不能这样创建了,可以调用Cla ...

  4. CF147B Smile House

    题目大意:给定一个有向图,其中边有边权.求点数最少的正环的点数. 题解:建立矩阵,处理其二进制上每一位的状态.时间O(n^3*log(n)). 代码: #include<cstdio> # ...

  5. MySQL异常：Caused by: com.mysql.jdbc.exceptions.MySQLTimeoutException: Statement cancelled due to timeout or client request

    Caused by: com.mysql.jdbc.exceptions.MySQLTimeoutException: Statement cancelled due to timeout or cl ...

  6. 零基础入门学习Python（28）--文件

    知识点 Python中使用open(...)这个内置函数来打开文件,并返回文件对象 open()函数参数说明: open(file, mode='r', buffering=-1, encoding= ...

  7. linux ping-测试主机之间网络的连通性

    博主推荐:更多网络测试相关命令关注 网络测试  收藏linux命令大全 ping命令用来测试主机之间网络的连通性.执行ping指令会使用ICMP传输协议,发出要求回应的信息,若远端主机的网络功能没有问 ...

  8. numpy——基础数组与计算

    In [1]: import numpy as np In [11]: # 创建数组 a = np.array([1,2,3,4,5]) In [12]: a Out[12]: array([1, 2 ...

  9. C++标准模板库 ——堆栈使用

    include using namespace std; stack S; S.push(i); S.pop(); int x = S.top(); ```

  10. CodeForcesGym 100524J Jingles of a String

    Jingles of a String Time Limit: 2000ms Memory Limit: 524288KB This problem will be judged on CodeFor ...