您的位置：首页 > Web前端 > JQuery

jquery 页面滚动tab自动定位，tab与内容对应

2017-04-24 15:46 134 查看

直接上源码，基于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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航