.container {
/*最外层div定宽*/
position: relative;
width: 15rem;
height: 1rem;
margin-top: 20rem;
}
.con {
/*第二层div,设置溢出为滚动条*/
overflow-x: scroll;
overflow-y: hidden;
height: 1rem;
font-size: 0.4rem;
width: 15rem;
position: absolute;
top: 0;
}
.nav {
/*导航条div 设置弹性盒子,使得子集为一行显示,设置子集float也可以 宽度为js动态设置*/
display: flex;
}
.nav li {
/*子集样式*/
width: 4rem;
flex: 0 0 4rem;
border: 1px solid #000000;
}
.active {
/*选中后的样式*/
background-color: bisque;
}
/*以下是监听元素的样式*/
.list {
margin-bottom: 30rem;
}
.item {
height: 6rem;
width: 15rem;
border: 1px solid;
}
<!--导航栏部分-->
<div class="container">
<div class="con">
<ul class="nav">
<li class="active"> 1111111</li>
<li>222222</li>
<li>333333</li>
<li>44444</li>
<li>55555555</li>
<li>66666666</li>
<li>7777</li>
</ul>
</div>
</div>
<!--监听元素部分-->
<div class="list">
<div class="item">
111111111111111111
</div>
<div class="item">
222222222222222222
</div>
<div class="item">
3333333333333333333
</div>
<div class="item">
444444444444444444
</div>
<div class="item">
5555555555555555555
</div>
<div class="item">
6666666666666666666
</div>
<div class="item">
77777777777777777777
</div>
</div>
$(function() {
scrollgen({ //调用 全部可选参数 导航栏默认为 .nav
navChild: '.nav li', //导航栏子集 li
navFather: '.con', //导航栏父级
nav: '.nav', //导航栏ul
active: '.active', //被选中后的样式
control: '.item', //监听的元素
//isFollow: true //默认为false 为全部显示 false为tab切换 //true 为全部显示, 监视滚动条跟随
})
function scrollgen(obj) {
//默认参数
var objDefault = {
navChild: $('.nav').children(), //默认获取子节点
navFather: $('.nav').parent(), //默认获取父级
nav: $('.nav'),
active: $('.active'),
control: $('.nav').parent().parent().next().children(),
};
if(!obj) {
obj = {}
}
$.extend(obj, objDefault);
var $navChild = $(obj.navChild),
$navFather = $(obj.navFather),
$nav = $(obj.nav),
$active = $(obj.active),
active = $active[0].className,
$control = $(obj.control),
isFollow = obj.isFollow || false; //默认为false
$navChild.eq(0).addClass(active).siblings().removeClass(active);//初始值为第一个li选中
$navFather.animate({
scrollLeft: 0
}, 200)
var nh = $nav.offset().top, //获取导航栏在文档中的高度
sh = $(document).scrollTop(); //获取滚轮高度
var start_nH = $nav.offset().top
index = $navChild.index() + 1
//动态设置nav 宽度
$nav.width(function() {
return $navChild.width() * index + 10 + 'px';
})
var Harr = [], //存储item高度容器
Warr = []; //存储nav li offsetleft容器
$control.each(function(index, el) {
Harr.push(el.offsetTop);
})
$navChild.each((index, el) => {
Warr.push(el.offsetLeft);
})
if(isFollow == false) {
$control.eq(0).css({
'display': 'block'
}).siblings().css({
'display': 'none'
});
$navChild.click(function() {
var i = $(this).index()
$control.eq(i).css({
'display': 'block'
}).siblings().css({
'display': 'none'
});
$('html,body').animate({
scrollTop: $control.eq(i).offset().top - $nav.height() - 10
}, 400);
$navChild.eq(i).addClass(active).siblings().removeClass(active);
var item = $("." + active);
var itemOffset = item.offset();
//元素离 scrollLeft等于0 时的距离
var itemOffsetLeft = itemOffset.left + $navFather.scrollLeft();
//scrollLeft等于0,居中时的offsetLeft
var centerLeft = ($navFather.width() - item.width()) / 2;
$navFather.stop().animate({
scrollLeft: itemOffsetLeft - centerLeft
}, 200)
})
}
$(window).scroll(function() {
sh = $(document).scrollTop();
if($(window).scrollTop() >= nh) {
$navFather.css({
'position': 'fixed',
"top": '0'
});
Harr.forEach((n, i) => {
if($(window).scrollTop() >= n - $nav.height() - 15) {
if(isFollow) {
$navChild.eq(i).addClass(active).siblings().removeClass(active);
}
}
});
//以下是导航跟随逻辑,
//思路:计算出scrollLeft =0 时 元素离文档最左侧的距离 - 滚动后元素离 scrollLeft =0 时 元素离文档最左侧的距离 =滚动距离
var item = $("." + active);
var itemOffset = item.offset();
//元素离 scrollLeft等于0 时的距离
var itemOffsetLeft = itemOffset.left + $navFather.scrollLeft();
//scrollLeft等于0,居中时的offsetLeft
var centerLeft = ($navFather.width() - item.width()) / 2;
$navFather.stop().animate({
scrollLeft: itemOffsetLeft - centerLeft
})
} else {
$navFather.css({
'position': 'absolute',
"z-index": '7'
})
}
});
$navChild.click(function() {
var i = $(this).index()
var offsetH = $control.eq(i).offset().top;
$('html,body').animate({
scrollTop: $control.eq(i).offset().top - $nav.height() - 10
}, 500)
})
}
})