使用技术: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);
});
});
});
效果如下: