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>
jquery 页面滚动tab自动定位，tab与内容对应的更多相关文章
- jQuery页面滚动监听事件及高级效果插件
jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scrol ...
- jquery页面滚动显示浮动菜单栏锚点定位效果
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- jquery页面滚动到指定id
//jquery页面滚动到指定id $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html ...
- Jquery页面滚动动态加载数据，页面下拉自动加载内容
<!DOCTYPE=html> <html> <head> <script src="js/jquery.js" type="t ...
- jquery 页面滚动到底部自动加载插件集合
很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载更多的内容.下面为你推荐 10 个 jQuery 的无限滚动的插件: 1. jQuery ScrollPa ...
- jQuery页面滚动底部加载数据
$(window).scroll(function () { var scrollTop = $(this).scrollTop(); var scrollHeight = ...
- jquery页面滚动，菜单固定到顶部
// 菜单固定 $(function(){ //获取要定位元素距离浏览器顶部的距离 var navH = $("#topp").offset().top; //滚动条事件 $(wi ...
- jQuery页面滚动图片等元素动态加载实现
一.关于滚动显屏加载 常常会有这样子的页面,内容很丰富,页面很长,图片较多.比如说光棍节很疯狂的淘宝商城页面. 或者是前段时间写血本买了个高档耳机的京东商城页面,或者是新浪微博之类. 这些页面图片数量 ...
- [转]jQuery页面滚动图片等元素动态加载实现
本文转自:http://www.zhangxinxu.com/wordpress/?p=1259 一.关于滚动显屏加载 常常会有这样子的页面,内容很丰富,页面很长,图片较多.比如说光棍节很疯狂的淘宝商 ...
随机推荐
- uploadify插件可选参数的详细介绍
Uploadify 是一个JQuery插件,它协助你轻松简单的将一个或多个文件上传至你的网站. 它需要Flash控件和后台开发语言的支持,丰富的参数配置,同时也简单易用,让你轻松上手. 官 ...
- python msg_box
转自:http://www.cnblogs.com/otfsenter/ # _*_ coding: utf-8 _*_ # @Time : 2017/3/27 17:39 # @Author : o ...
- joda-time时间操作组件
今天看到了学习到了一个不错的操作时间的jar包,很方便的,以后操作时间运算就可以直接使用jar包中的方法了,再也不用自己写操作时间的方法了.懒的不行不行的 <!-- 时间操作组件 --> ...
- [Luogu] P1156 垃圾陷阱
题目描述 卡门――农夫约翰极其珍视的一条Holsteins奶牛――已经落了到“垃圾井”中.“垃圾井”是农夫们扔垃圾的地方,它的深度为D(2≤D≤100)英尺. 卡门想把垃圾堆起来,等到堆得与井同样高时 ...
- [模板] Treap
插入x 删除x 查询排名为x的数 查询x的排名 求x的前驱.后继 //Stay foolish,stay hungry,stay young,stay simple #include<iostr ...
- idea导入本地idea的web项目(服务器用的是tomcat)
开始吧!!! 点击import project. 我以SpringMVCPro3为例,选中,点击OK 点击next 继续next 随便吧,我点击yes 选中工程,点击next lib1不要钩,然后点击 ...
- 初次使用IDEA创建maven项目
第一次使用IDEA,创建一个maven项目,首先下载maven,官方地址:http://maven.apache.org/download.cgi 解压,在环境变量里配置 path里 D:\maven ...
- matplotlib.pyplot.pcolormesh
matplotlib.pyplot.pcolormesh(*args, alpha=None, norm=None, cmap=None, vmin=None, vmax=None, shading ...
- WSS、SSL 和 https 之间的关系
SSL SSL(Secure Socket Layer,安全套接层) 简单来说是一种加密技术, 通过它, 我们可以在通信的双方上建立一个安全的通信链路, 因此数据交互的双方可以安全地通信, 而不需要担 ...
- Mac os安装MySQL数据库，系统提示mysql: command not found该怎么办
当我们安装好MySQL后,在终端输入mysql命令,发现并不能看到自己安装的数据库,这是因为你没有配置环境变量. 在os系统中安装MySQL数据库默认保存在/usr/local/mysql 那么我们应 ...