当先锋百科网

首页 1 2 3 4 5 6 7

滚动监听,到指定元素时背景色黑白切换

			onPageScroll: function(Object) {
				console.log(Object.scrollTop); //实时获取到滚动的值
				if (Object.scrollTop > 224) {
					var height = Object.scrollTop - 224;
					console.log("height:" + height);
					if (height < 108) {
						document.getElementById('position').style.height = height + "px";
						document.getElementById('position').style.backgroundColor = "#000000";
					}
				} else {
					document.getElementById('position').style.backgroundColor = "#FFFFFF";
				}
			}

在这里插入图片描述
在这里插入图片描述

			<view class="cool">
				<view id="tit" class="flexHeader">
					<view class="left">
						<h5 class="padding">Join Hands on Green Printing</h5>
					</view>
					<view class="right">
						CHAT WITH US
					</view>
					<view>
						<image src="../../static/chat.png"></image>
					</view>
				</view>
				<view id="position"></view>
			</view>
				.cool {
					height: 150rpx;

					#position {
						width: 100%;
						position: relative;
						bottom: 90rpx;
						height: 0rpx;
					}

					.flexHeader {
						display: flex;
						z-index: 10;
						position: relative;
						color: #FFFFFF;

						.left {
							width: 72%;
							position: relative;
							left: 105rpx;
							font-size: 25rpx;
							font-family: "Champagne&Limousines-Bold";
						}

						.right {
							width: 10%;
							font-size: 10rpx;
							font-family: PingFang-SC-Medium;
							height: 52rpx;
							line-height: 52rpx;
							margin-left: 85rpx;
						}

						image {
							padding-top: 16rpx;
							width: 24rpx;
							height: 22rpx;
							margin-left: 10rpx;
						}
					}
				}