jquery 页面滚动tab自动定位，tab与内容对应
直接上源码，基于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>
