vue滑动列表悬停列表上部分指定区域

1.效果：

2.代码

	
		
			
				
				
			
			
		

		

			
				
			
			
				
					
					新手礼物
				
				
					
					行情观测
				
				
					
					安全保障
				
				
					
					投资理财
				
			
			
				
				
			
			
				
					
						15
						.
						9
						%
					

				
				还款期限60天
				东吴e禄永利年融资项
				评分等级
				本息保障
				等额本息
				借款金额2万元起
			

		

	



	export default {
		name: 'HelloWorld',
		data() {
			return {
				msg: "测试",
				isFixedModel: false,
				bannerHeight: 0
			}

		},
		mounted() {
			let height = this.$refs.element.offsetHeight; //获取控件的高度
			this.bannerHeight = height
			console.log("banner高度", height)
			window.addEventListener('scroll', this.handleScroll, true)
		},
		methods: {
			handleScroll() {
				var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
				console.log("距离顶部的高度==>", scrollTop)
				if (scrollTop > this.bannerHeight) {
					this.isFixedModel = true;
				} else {
					this.isFixedModel = false;
				}
			}
		}

	}



	.top {
		width: 750px;
		height: 98px;
		background-color: #FFAA5E;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		z-index: 999;
	}

	.searchView {
		width: 620px;
		height: 60px;
		background-color: #FFFFFF;
		border-radius: 30px;
		margin-left: 30px;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.search-icon {
		width: 30px;
		height: 31px;
		margin-left: 30px;
	}

	.msg {
		width: 34px;
		height: 40px;
		margin-left: 32px;
	}

	.input-text {
		background: none;
		outline: none;
		border: none;
		font-size: 28px;
		font-family: PingFang;
		font-weight: 500;
		color: #BEBFC2;
		margin-left: 16px;
		width: 222px;
		height: 26px;
		line-height: 76px;
	}

	/*修改提示信息的文本颜色*/
	input::-webkit-input-placeholder {
		/* WebKit browsers */
		color: #BEBFC2;
		font-size: 28px;
	}

	input::-moz-placeholder {
		/* Mozilla Firefox 19+ */
		color: #BEBFC2;
		font-size: 28px;
	}

	input:-ms-input-placeholder {
		/* Internet Explorer 10+ */
		color: #BEBFC2;
		font-size: 28px;
	}

	.banner {
		width: 750px;
		height: 300px;
		margin-top: 98px;
	}

	.banner-image {
		width: 750px;
		height: 300px;
	}

	.model {
		width: 750px;
		height: 148px;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}

	.model2 {
		width: 750px;
		height: 148px;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		position: fixed;
		top: 98px;
		left: 0;
		z-index: 999;
		background-color: #ecf0f4;
	}

	.model-item {
		height: 87px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.model-image {
		height: 56px;
		width: 54px;
	}

	.model-text {
		font-size: 22px;
		font-family: PingFang;
		font-weight: bold;
		color: #242526;
		line-height: 70px;
	}

	.tip {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 30px;
		margin-top: 30px;
	}

	.hot-icon {
		height: 32px;
		width: 29px;
	}

	.tip-icon {
		height: 31px;
		width: 128px;
		margin-left: 9px;
	}

	.itemView {
		width: 710px;
		height: 235px;
		background: #FFFFFF;
		border-radius: 10px;
		position: relative;
		margin-left: 20px;
		margin-top: 20px;
	}

	.itemNumView {
		width: 204px;
		height: 82px;
		position: absolute;
		left: 39px;
		top: 53px;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.num1 {
		height: 82px;
		color: #FB5858;
		font-size: 90px;
		font-family: Segoe UI Emoji;
		font-weight: bold;
	}

	.num2 {
		color: #FB5858;
		font-size: 90px;
		font-family: Segoe UI Emoji;
		font-weight: bold;
	}

	.num3 {
		color: #FB5858;
		font-size: 70px;
		font-family: Segoe UI Emoji;
		font-weight: bold;
	}

	.num4 {
		color: #FB5858;
		font-size: 40px;
		font-family: Segoe UI Emoji;
		margin-left: 10px;
	}

	.itemTime {
		position: absolute;
		left: 40px;
		top: 165px;
		font-size: 26px;
		font-family: PingFang;
		font-weight: 500;
		color: #8F8F8F;
	}

	.itemTitle {
		max-width: 380px;
		position: absolute;
		left: 304px;
		top: 52px;
		font-size: 32px;
		font-family: PingFang;
		font-weight: bold;
		color: #262626;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.itemCard1 {
		position: absolute;
		left: 304px;
		top: 97px;
		background-color: #23D766;
		padding: 8px 15px 7px 14px;
		font-size: 22px;
		font-family: PingFang;
		font-weight: 500;
		color: #FFFFFF;
	}

	.itemCard2 {
		position: absolute;
		left: 430px;
		top: 97px;
		background-color: #42D9F9;
		padding: 8px 15px 7px 14px;
		font-size: 22px;
		font-family: PingFang;
		font-weight: 500;
		color: #FFFFFF;
	}

	.itemCard3 {
		position: absolute;
		left: 556px;
		top: 97px;
		background-color: #F9B30C;
		padding: 8px 15px 7px 14px;
		font-size: 22px;
		font-family: PingFang;
		font-weight: 500;
		color: #FFFFFF;
	}

	.itemTip {
		position: absolute;
		left: 304px;
		top: 165px;
		font-size: 26px;
		font-family: PingFang;
		font-weight: 500;
		color: #8F8F8F;
	}