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");
}
})
});
})