右侧商品页滑动的时候，左侧菜单需要随滚动条点亮。

HTML 部分，怎么左右布局，并且实现分别滚动，自己去学 CSS。

    <!--左侧-->
    <ul class="good-classify">
        <a href="#one" class="classify-active">热饮推荐</a>
        <a href="#two">新鲜水果汁</a>
        <a href="#three">芝士与奶酪</a>
        <a href="#four">咖啡</a>
    </ul>

    <!--右侧-->
    <div class="good-list">
        <ul class="classify-item" id="one">
            <div class="title">热饮推荐</div>
            <li>
                <img src="http://cdn.windyet.com/goods.png" alt="">
                <div class="goods-info">
                    <h5>商品标题</h5>
                    <p>这是商品描述，这是商品描述ds</p>
                    <div class="price">
                        <span>￥22.22</span>
                        <span class="fa fa-plus-circle"></span>
                    </div>
                </div>
            </li>
            <li>
                <img src="http://cdn.windyet.com/goods.png" alt="">
                <div class="goods-info">
                    <h5>商品标题</h5>
                    <p>这是商品描述，这是商品描述ds</p>
                    <div class="price">
                        <span>￥22.22</span>
                        <span class="fa fa-plus-circle"></span>
                    </div>
                </div>
            </li>
            <li>
                <img src="http://cdn.windyet.com/goods.png" alt="">
                <div class="goods-info">
                    <h5>商品标题</h5>
                    <p>这是商品描述，这是商品描述ds</p>
                    <div class="price">
                        <span>￥22.22</span>
                        <span class="fa fa-plus-circle"></span>
                    </div>
                </div>
            </li>
            <li>
                <img src="http://cdn.windyet.com/goods.png" alt="">
                <div class="goods-info">
                    <h5>商品标题</h5>
                    <p>这是商品描述，这是商品描述ds</p>
                    <div class="price">
                        <span>￥22.22</span>
                        <span class="fa fa-plus-circle"></span>
                    </div>
                </div>
            </li>
        </ul>
        <ul class="classify-item" id="two">
            <div class="title">新鲜水果</div>
            <li>
                <img src="http://cdn.windyet.com/goods.png" alt="">
                <div class="goods-info">
                    <h5>商品标题</h5>
                    <p>这是商品描述，这是商品描述ds</p>
                    <div class="price">
                        <span>￥22.22</span>
                        <span class="fa fa-plus-circle"></span>
                    </div>
                </div>
            </li>
            <li>
                <img src="http://cdn.windyet.com/goods.png" alt="">
                <div class="goods-info">
                    <h5>商品标题</h5>
                    <p>这是商品描述，这是商品描述ds</p>
                    <div class="price">
                        <span>￥22.22</span>
                        <span class="fa fa-plus-circle"></span>
                    </div>
                </div>
            </li>
            <li>
                <img src="http://cdn.windyet.com/goods.png" alt="">
                <div class="goods-info">
                    <h5>商品标题</h5>
                    <p>这是商品描述，这是商品描述ds</p>
                    <div class="price">
                        <span>￥22.22</span>
                        <span class="fa fa-plus-circle"></span>
                    </div>
                </div>
            </li>
            <li>
                <img src="http://cdn.windyet.com/goods.png" alt="">
                <div class="goods-info">
                    <h5>商品标题</h5>
                    <p>这是商品描述，这是商品描述ds</p>
                    <div class="price">
                        <span>￥22.22</span>
                        <span class="fa fa-plus-circle"></span>
                    </div>
                </div>
            </li>
        </ul>
        <ul class="classify-item" id="three">
            <div class="title">芝士与奶酪</div>
            <li>
                <img src="http://cdn.windyet.com/goods.png" alt="">
                <div class="goods-info">
                    <h5>商品标题</h5>
                    <p>这是商品描述，这是商品描述ds</p>
                    <div class="price">
                        <span>￥22.22</span>
                        <span class="fa fa-plus-circle"></span>
                    </div>
                </div>
            </li>
            <li>
                <img src="http://cdn.windyet.com/goods.png" alt="">
                <div class="goods-info">
                    <h5>商品标题</h5>
                    <p>这是商品描述，这是商品描述ds</p>
                    <div class="price">
                        <span>￥22.22</span>
                        <span class="fa fa-plus-circle"></span>
                    </div>
                </div>
            </li>
            <li>
                <img src="http://cdn.windyet.com/goods.png" alt="">
                <div class="goods-info">
                    <h5>商品标题</h5>
                    <p>这是商品描述，这是商品描述ds</p>
                    <div class="price">
                        <span>￥22.22</span>
                        <span class="fa fa-plus-circle"></span>
                    </div>
                </div>
            </li>
            <li>
                <img src="http://cdn.windyet.com/goods.png" alt="">
                <div class="goods-info">
                    <h5>商品标题</h5>
                    <p>这是商品描述，这是商品描述ds</p>
                    <div class="price">
                        <span>￥22.22</span>
                        <span class="fa fa-plus-circle"></span>
                    </div>
                </div>
            </li>
        </ul>
        <ul class="classify-item" id="four">
            <div class="title">咖啡</div>
            <li>
                <img src="http://cdn.windyet.com/goods.png" alt="">
                <div class="goods-info">
                    <h5>商品标题</h5>
                    <p>这是商品描述，这是商品描述ds</p>
                    <div class="price">
                        <span>￥22.22</span>
                        <span class="fa fa-plus-circle"></span>
                    </div>
                </div>
            </li>
            <li>
                <img src="http://cdn.windyet.com/goods.png" alt="">
                <div class="goods-info">
                    <h5>商品标题</h5>
                    <p>这是商品描述，这是商品描述ds</p>
                    <div class="price">
                        <span>￥22.22</span>
                        <span class="fa fa-plus-circle"></span>
                    </div>
                </div>
            </li>
            <li>
                <img src="http://cdn.windyet.com/goods.png" alt="">
                <div class="goods-info">
                    <h5>商品标题</h5>
                    <p>这是商品描述，这是商品描述ds</p>
                    <div class="price">
                        <span>￥22.22</span>
                        <span class="fa fa-plus-circle"></span>
                    </div>
                </div>
            </li>
            <li>
                <img src="http://cdn.windyet.com/goods.png" alt="">
                <div class="goods-info">
                    <h5>商品标题</h5>
                    <p>这是商品描述，这是商品描述ds</p>
                    <div class="price">
                        <span>￥22.22</span>
                        <span class="fa fa-plus-circle"></span>
                    </div>
                </div>
            </li>
        </ul>
    </div>

 

 

JS 部分：

<!--右侧商品滚动时候，激活左侧栏效果实现-->
<script>
    // 遍历获取距离文档顶部的高度
    var indexList = [];
    $(".good-list > .classify-item").each(function () {
        var offTop = $(this).offset().top;  //获取每个分类距离顶部距离
        indexList.push(offTop);
    });

    var length = indexList.length;

    // 监听右侧商品页滚动事件，对good-list进行监听
    $('.good-list').scroll(function (event) {
        var scrollTop = $('.good-list').scrollTop();  //获取右侧商品页滚动的高度
        // 判断距离小于第1个分类，则第一个分类亮起
        if (scrollTop < indexList[1]) {
            $('.good-classify > a').eq(0).css({'background': '#fff'}).siblings().css({"background": "none"});
        }

        // 判断第 2 到 n-1 个的距离，对应的要亮起来。大于当前并且小于下一个距离。
        if (length >= 3) {
            for (var i = 1; i < length - 1; i++) {
                if (scrollTop >= indexList[i] && scrollTop < indexList[i + 1]) {
                    $('.good-classify > a').eq(i).css({'background': '#fff'}).siblings().css({"background": "none"});
                }
            }
        }

        // 判断最后一个
        if (scrollTop >= indexList[length - 1]) {
            $('.good-classify > a').eq(length - 1).css({'background': '#fff'}).siblings().css({"background": "none"});
        }
    });
</script>