$(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)

})

}

})