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 一.关于滚动显屏加载 常常会有这样子的页面,内容很丰富,页面很长,图片较多.比如说光棍节很疯狂的淘宝商 ...
随机推荐
- 将Jar安装到本地仓库和Jar上传到私服
举例 1. 依赖如下: <dependency> <groupId>org.quartz-scheduler.internal</groupId> <arti ...
- spring的设计思想
在学习Spring框架的时候, 第一件事情就是分析Spring的设计思想 在学习Spring的时候, 需要先了解耦合和解耦的概念 耦合: 简单来说, 在软件工程当中, 耦合是指对象之间的相互依赖 耦合 ...
- python msg_box
转自:http://www.cnblogs.com/otfsenter/ # _*_ coding: utf-8 _*_ # @Time : 2017/3/27 17:39 # @Author : o ...
- python selenium定位总结（转）
转自:http://www.cnblogs.com/yufeihlf/p/5717291.html 父子定位元素 查找有父亲元素的标签名为span,它的所有标签名叫input的子元素 find_ele ...
- css hack解决方案
现在大家做项目的时候估计很多都已经不怎么考虑兼容问题,大多数的公司都已经舍弃ie7.8了,都是从ie9+开始,所以说不会有那么多的兼容问题需要去解决了,但是由于本人力求完美的工作习惯,做项目的时候还是 ...
- Layui表格之动态添加数据（表格多选解决方案）
前言: Layui已经给出了多选记录的解决方案,是在每条数据的前面加上CheckBox,每次选择都有监听.效果是这样: 实现监听的代码如下,这是一种解决选择多条数据的方案: table.on('edi ...
- IO之Print流举例
import java.io.*; public class TestPrintStream1 { public static void main(String[] args) { PrintStre ...
- mysql数据库导出导入
MYSQL的命令行模式设置: 我的电脑->属性->高级系统设置->环境变量->系统变量-> 选择Path,在后面添加“;path\mysql\bin;”其中path为MY ...
- 杭电1722 Cake （分蛋糕）
#include<cstdio> int f(int m,int n) { ) return n; else return f(n,m%n); } int main() { int m,n ...
- LeetCode 121. Best Time to Buy and Sell Stock (stock problem)
Say you have an array for which the ith element is the price of a given stock on day i. If you were ...