$(function() {
scrollgen({//调用 全部可选参数 导航栏默认为 .nav
navChild: ‘.nav li‘, //导航栏子集 li
navFather: ‘.con‘, //导航栏父级
nav: ‘.nav‘, //导航栏ul
active: ‘.active‘, //被选中后的样式
control: ‘.item‘, //监听的元素
//isFollow: true //默认为false 为全部显示 false为tab切换 //true 为全部显示, 监视滚动条跟随
})functionscrollgen(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)
})
}
})
