jquery 实现 菜单横向滑动以及滑动菜单时对应导航选中

1：实现效果

2：css 部分可自己补充；

3：简单的html部分；

 @* 菜品导航 *@
    <ul class="grin_nav">
        <li class="navActive">
            <span>酸菜鱼</span>
        </li>
        <li>
            <span>串串</span>
        </li>
        <li>

            <span>饮品</span>
        </li>
        <li>
            <span>主食小吃</span>
        </li>
    </ul>

 <div class="grin_good_list">
        <div class="good_con" data-index="0">           
        </div>
        <div class="good_con" data-index="1">        
        </div>
        <div class="good_con" data-index="2">        
        </div>
        <div class="good_con" data-index="3">      
        </div>
        <div  class="good_con" style="width:14%; height:20px;  box-shadow: inherit;"></div>
 </div>

4:js部分 

 $(function () {
         //点击导航 滑动到对应分类
        $(".grin_nav li").on("click", function () {
            var index = $(this).index();
            var good_con = $(".good_con");
            good_con.each(function () {
                if ($(this).attr("data-index") == index) {
                    console.log($(this))
                    console.log($(this)[0].offsetLeft)
                    var x = parseInt($(this)[0].offsetLeft - 70);
                    console.log($(this).offset())
                    $(".grin_good_list").animate({ scrollLeft: x }, 10);
                }
            })
            $(this).addClass("navActive");
            $(this).prevAll().addClass("navActive");
            $(this).nextAll().removeClass("navActive");
        });

    //滑动商品 对应导航选中
         $(".grin_good_list").scroll(function () {
            var item = $(this).context.scrollLeft + 70;
            var good_con = $(".good_con");
            good_con.each(function (i) {
                var j = (i + 1) >= good_con.length ? i : i + 1;
                var min = $(good_con.get(i)).context.offsetLeft;
                var max = $(good_con.get(j)).context.offsetLeft;
                if (item >= min && item <= max) {
                    $(".grin_nav li").eq(i).addClass("navActive");
                    $(".grin_nav li").eq(j).removeClass("navActive");
                }
            })
        });

})