参考地址
![](https://i-blog.csdnimg.cn/blog_migrate/ddf91743cec6cfb9f3705edaad458e27.png)
![](https://i-blog.csdnimg.cn/blog_migrate/6e9e300494f07dc8c326325d3e01f635.png)
<div class="Mobel_Top_lr">
<div class="Mobel_Top_lr_ALL">
<div class="Mobel_Top_L">
<img src="https://img-1252908129.file.myqcloud.com/img/Mobel_lr.png" alt="">
</div>
<!-- 修改宽度的话要去修改rem才能 -->
<div class="Mobel_Top_Inr">
<ul>
<li class="sta" data-nub = "0">主会场</li>
<li data-nub = "1">智慧零售</li>
<li data-nub = "2">AI</li>
</ul>
</div>
<div class="Mobel_Top_R">
<img src="https://img-1252908129.file.myqcloud.com/img/Mobel_lr.png" alt="">
</div>
</div>
</div>
$(".Mobel_Top_L").on('click',function(){
var e = $(".Mobel_Top_Inr ul")
, t = e[0].scrollLeft
, g = e[0].scrollWidth
, n = e[0].offsetWidth;
0 < t && e.animate({
scrollLeft: Math.max(0, t - n)
}, 200)
})
$(".Mobel_Top_R").on('click',function(){
var e = $(".Mobel_Top_Inr ul")
, t = e[0].scrollLeft
, g = e[0].scrollWidth
, n = e[0].offsetWidth
, a = g - n;
t < a && e.animate({
scrollLeft: Math.min(a, t + n)
}, 200)
})
$(".Mobel_Top_Inr li").on('click',function(){
var num = getDataset(this).nub
// var _VEL = $('.ConAll').[num]
window.scrollTo(0,$('.ConAll')[num].offsetTop - 50)
$(".Mobel_Top_Inr li").removeClass('sta')
$(this).addClass('sta')
})
var ReadyAgen = function(){
//获取当前滚动条高度
var topp = $(document).scrollTop();
//用于调试 弹出当前滚动条高度
if(topp > 180){
$(".Mobel_Top_lr").addClass('layout-aside-fixed')
}else{
$(".Mobel_Top_lr").removeClass('layout-aside-fixed')
}
}
$(document).ready(function(){//在文档加载完毕后执行
ReadyAgen()
ReadyAgenTop()
})
window.addEventListener('scroll',ReadyAgen);
/**/
var ReadyAgenTop = function() {
var scrollTop = $(window).scrollTop();//滚动条距离顶部的距离
var e = $(".Mobel_Top_Inr ul")
var itemTop = [];
for(var i = 0;i< navlist.length;i++){
itemTop[i] = $($(".ConAll")[i]).offset().top //获取对应模块距离顶部的距离 - $(document).scrollTop();
}
var NowNumber
for(i = 0;i <= navlist.length; i++){
if(scrollTop >= itemTop[i]- 88 && itemTop[i] > 0){ //判断大小
NowNumber = i
// console.log(i);
navlist.eq(i).addClass('sta').siblings('li').removeClass('sta');
}
}
var changelefts = itemLeft[NowNumber]
e.animate({scrollLeft: changelefts-40}, 50)
}
var navlist = $('.Mobel_Top_Inr ul li'); //获取导航列表
var itemLeft = [];
for(var i = 0;i< navlist.length;i++){
itemLeft[i] = Math.round($($(".Mobel_Top_Inr ul li")[i]).offset().left)
}
window.addEventListener('scroll',throttle(ReadyAgenTop,50));
// 简单的节流函数
function throttle(fun, delay, time) {
var timeout,
startTime = new Date();
return function() {
var context = this,
args = arguments,
curTime = new Date();
clearTimeout(timeout);
// 如果达到了规定的触发时间间隔,触发 handler
if (curTime - startTime >= time) {
fun.apply(context, args);
startTime = curTime;
// 没达到触发间隔,重新设定定时器
} else {
timeout = setTimeout(function(){
fun.apply(context, args);
}, delay);
}
};
};
![](https://i-blog.csdnimg.cn/blog_migrate/0c2da861f5214f2a4300060c3e0e86f6.png)