移动端H5左右联动

demo下载路径https://download.csdn.net/download/qq_39232387/13145217

实现下面这种效果
整体布局

左右联动的实现

var $navList = $('.tab_ul li'),
    $conts = $('.tab_con'),
    curNav = 0;
var contTopList = [];

$conts.each(function(i) {
    contTopList.push($(this).position().top );
});

var len = contTopList.length;
// 滚动右边
$('.tab_list').on('scroll', function(e) {
    var _scrollTop = (0-($(".tab_con").offset().top))+contTopList[0]+127;
    console.log("scro>>>>>>",_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;
        }
    }
});
// 点击左边
function changeNav(index) {
	console.log("当前第 ", index," 个");
    if (index != curNav) {
        $navList.eq(index).addClass('tab_active').siblings().removeClass('tab_active');
    }
    curNav = index;
}

$navList.on('click',function(e){
    var navHref = $(this).find('a').attr('data-href');
    var  mTop = $( '.testing_one' )[0].offsetTop;
       var  sTop = $(window).scrollTop();
       var  result = mTop - sTop;
         console.log("顶部",result); 
    $('.tab_list').scrollTop(contTopList[$(this).index()]-result);
});