商品滚动左侧对应分类高亮

Html

Css

* {
	padding:0;
	margin:0;
	font-size:14px;
}
a {
	color:rgb(7,17,27);
	text-decoration:none;
}
.wrapper {
	width:450px;
	height:600px;
	margin:0 auto;
}
.header {
	width:100%;
	height:100px;
	background:gainsboro;
	text-align:center;
	line-height:100px;
	border-bottom:5px solid white;
}
.container {
	width:450px;
	height:600px;
	border:1px solid gainsboro;
	display:flex;
}
.header {
	}.left,.left .element {
	width:100px;
	height:600px;
}
.right,.right .element {
	flex:1;
	height:600px;
}
.outer-container {
	position:relative;
	overflow:hidden;
}
.inner-container {
	width:100%;
	position:absolute;
	left:0;
	overflow-x:hidden;
	overflow-y:auto;
}
.inner-container::-webkit-scrollbar {
	display:none;
}
.list {
	width:100px;
	height:80px;
	border-bottom:1px solid gainsboro;
	border-right:1px solid gainsboro;
	box-sizing:border-box;
}
.list a {
	display:block!important;
	width:100%;
	height:100%;
	text-align:center;
	line-height:80px;
}
.right-list {
	width:100%;
	height:auto;
}
.list:hover {
	background:gainsboro;
	color:white;
}
.list-active {
	background:gainsboro;
	color:white!important;
}
.list-active a {
	color:white!important;
}
.right-list h3 {
	width:100%;
	height:30px;
	border-left:5px solid gray;
	background:gainsboro;
	line-height:30px;
	padding-left:20px;
	color:white;
}
.right-list p {
	width:100%;
	text-align:center;
	height:30px;
	line-height:30px;
}

window.onload = function() {
    var arrheight = [];

function arrHeight() {
        var items = document.getElementsByClassName('right-list');
        for (let i = 0; i < items.length; i++) {
            var scrolltop = items[i].offsetTop;
            arrheight.push(scrolltop);
        }
    }

function noactive() {
        let item = document.getElementsByClassName('list')
        for (let i = 0; i < item.length; i++) {
            item[i].setAttribute('class', 'list')
        }
    }

function clickactve() {
        let list = document.getElementsByClassName('list')
        for (let i = 0; i < list.length; i++) {
            list[i].onclick = function() {
                noactive()
                list[i].setAttribute('class', 'list list-active')
            }
        }
    }
    document.getElementById('right-hook').onscroll = function() {
        scrollactive()
    }
    arrHeight()
    scrollactive()
    clickactve()
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

商品滚动左侧对应分类高亮



代码描述：仿美团商品界面||商品滚动左侧对应分类高亮

最近在做一个仿美团app,在网上找了大量资源,并没有太实用的,所以就自己动手写了一个,pc和移动端都可以使用,当右侧滑动式左侧自动高亮,使用起来非常方便

1

最新

发表评论全部评论

暂时没有评论！

WckY0

2017/11/10 16:30:05

为啥最后一个就不好使了 -.-
回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

AA―董小礼

相关代码

分类01

分类02

分类03

分类04

分类05

分类06

分类07

分类08

分类9

分类10

商品滚动左侧对应分类高亮

最新