angular1 + jquery实现仿饿了么滚动切换菜单功能

使用技术:angular1,jquery,scss(PS:不使用angular或使用其他框架都可以,这里只是刚好项目使用,直接就拿来用了)
思路:界面分左右两侧, 监听右侧滚动事件,当每个标题位置滚动到距离顶部一定距离时,切换菜单的css样式即可
废话不多说,直接上代码

html

<div class="scroll-page">
            <div class="content">
                <div class="left-content">
                    <ul>
                        <li ng-repeat="item in items">{{item.name}}</li>
                    </ul>
                </div>
                <div class="right-content">
                    <ul>
                        <li style="min-height: 92vh;" class="{{item.class}}" ng-repeat="item in items2" on-finish-render>
                            <div class="class-title ">{{item.name}}</div>
                            <div ng-repeat="ite in item.list">
                                <div class="item">
                                    <div class="item-left">
                                        <div class="item-img"></div>
                                    </div>
                                    <div class="item-right">
                                        <div class="title">{{ite.title}}</div>
                                        <div class="subtitle"></div>
                                        <div class="price"></div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

scss部分(如果需要可以找工具转换成css,样式可以根据具体情况来改写)

.scroll-page {
  height: 100%;
  .content {
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    .left-content {
      top: 41px;
      width: 25%;
      height: 100%;
      background: #eee;
      ul {
        list-style: none;
        li {
          padding: 15px 5px;
          text-align: center;
        }
      }
    }
    .right-content {
      width: 75%;
      overflow: scroll;
      height: 92vh;
      ul {
        list-style: none;
        .class-title {
          padding: 7px 10px;
          background: #eee;
        }
        .item {
          overflow: hidden;
          width: 100%;
          padding: 10px;
          background: #fff;
          border-bottom: 1px solid #eee;
          .item-left {
            float: left;
            .item-img {
              width: 100px;
              height: 100px;
              background: #eee;
            }
          }
          .item-right {
            float: left;
            padding: 0 10px;
            .title {
              width: 100px;
              height: 20px;
              margin-top: 10px;
              background: #eee;
            }
            .subtitle {
              width: 70px;
              height: 20px;
              margin-top: 10px;
              background: #eee;
            }
            .price {
              width: 50px;
              height: 20px;
              margin-top: 10px;
              background: #eee;
            }
          }
        }
      }
    }
    .active {
      background: #fff;
      border-left: 2px solid #3190e8;
    }
  }
}

js部分

angular.module('app',[]).controller('scrollController', function ($scope) {

    $scope.items = [
        {name: '分类1'},
        {name: '分类2'},
        {name: '分类3'},
        {name: '分类4'},
        {name: '分类5'},
        {name: '分类6'},
        {name: '分类7'},
        {name: '分类8'}
    ];


    $scope.items2 = [
        {name: '分类1', class: 'item1', list: [{title: '1'}, {title: '2'}, {title: '3'}, {title: '4'}, {title: '5'}]},
        {name: '分类2', class: 'item2', list: [{title: '1'}, {title: '2'}, {title: '3'}, {title: '4'}]},
        {
            name: '分类3',
            class: 'item3',
            list: [{title: '1'}, {title: '2'}, {title: '3'}, {title: '4'}, {title: '5'}, {title: '6'}]
        },
        {name: '分类4', class: 'item4', list: [{title: '1'}, {title: '2'}]},
        {name: '分类5', class: 'item5', list: [{title: '1'}, {title: '2'}]},
        {name: '分类6', class: 'item6', list: [{title: '1'}, {title: '2'}]},
        {name: '分类7', class: 'item7', list: [{title: '1'}]},
        {name: '分类8', class: 'item8', list: [{title: '1'}, {title: '2'}]}
    ]

    angular.element(document).ready(function () {
        var content = $('.content');
        var rightContent = $('.right-content');
        var leftMenuItem = $('.left-content ul li');
        var rightDataContainer = $('.right-content ul li');
        // 设置容器高度
        content.css('height', rightContent.height());
        // 默认选中为第0个
        leftMenuItem.eq(0).addClass('active');
        // 监听右侧滚动事件
        rightContent.scroll(function () {
            //滚动到标杆位置,左侧导航加active
            rightDataContainer.each(function () {
                var target = parseInt($(this).offset().top - $(window).scrollTop() - 150);
                var i = $(this).index();
                if (target <= 0) {
                    leftMenuItem.removeClass('active');
                    leftMenuItem.eq(i).addClass('active');
                }
            });
        });
        // 监听左侧菜单点击事件
        leftMenuItem.click(function () {
            var i = $(this).index('.left-content ul li');
            var height = 0;
            for (var j = 0; j < i; j++) {
                var className = '.' + $scope.items2[j].class;
                height += $(className).height();
            }
            rightContent.animate({scrollTop: height}, 500);
        });
    });
});

效果如下: