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

1.效果：

2.代码

<template>
	<div class="hello">
		<div class="top">
			<div class="searchView">
				<img src="../assets/search_icon.png" class="search-icon" />
				<input class="input-text" placeholder="请输入关键词搜索" />
			</div>
			<img src="../assets/btn_xiaoxi.png" class="msg" />
		</div>

		<div>

			<div class="banner" ref="element">
				<img src="../assets/banner.png" class="banner-image" />
			</div>
			<div :class="isFixedModel?'model2':'model'" id="bar">
				<div class="model-item">
					<img src="../assets/model1.png" class="model-image">
					<span class="model-text">新手礼物</span>
				</div>
				<div class="model-item">
					<img src="../assets/model2.png" class="model-image">
					<span class="model-text">行情观测</span>
				</div>
				<div class="model-item">
					<img src="../assets/model3.png" class="model-image">
					<span class="model-text">安全保障</span>
				</div>
				<div class="model-item">
					<img src="../assets/model4.png" class="model-image">
					<span class="model-text">投资理财</span>
				</div>
			</div>
			<div class="tip">
				<img src="../assets/hot_icon.png" class="hot-icon">
				<img src="../assets/tip_text.png" class="tip-icon">
			</div>
			<div class="itemView" v-for="(item,index) in 10" :key="index">
				<div class="itemNumView">
					<div>
						<span class="num1">15</span>
						<span class="num2">.</span>
						<span class="num3">9</span>
						<span class="num4">%</span>
					</div>

				</div>
				<span class="itemTime">还款期限60天</span>
				<span class="itemTitle">东吴e禄永利年融资项</span>
				<span class="itemCard1">评分等级</span>
				<span class="itemCard2">本息保障</span>
				<span class="itemCard3">等额本息</span>
				<span class="itemTip">借款金额2万元起</span>
			</div>

		</div>

	</div>
</template>

<script>
	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;
				}
			}
		}

	}
</script>

<style scoped>
	.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;
	}
</style>