首页左侧固定导航缩放效果

时间：6年前阅读：4683

1、技术实现原理：获取首页可见文档document scrollTop滚动条位置，当滚动条往下拉 t>600 大于600像素，左侧的色块显示出来。当滚动条往上或下拉小于600，色块隐藏起来

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.left{
				position: fixed;
				top: 200px;
				left: 50px;
				background: pink;
				width: 60px;
				height: 248px;
				opacity: 1;
				transition: all 2s;
			}
			.left.h{
				transform: scale(1);
				opacity: 0;
			}
			img{
			        width:100%;
			        height:2000px;
				display: block;
				margin: 0 auto;
			}
		</style>
		<script src="../js/jquery-1.11.3.min.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(function(){
				$(window).scroll(function(){
					var t = $(document).scrollTop();
					if (t>600) {
						$('.left').removeClass('h');
					}else{
						$('.left').addClass('h');
					}
					
				})
			})
		</script>
	</head>
	<body>
		<div class="left h"></div>
		<img src="https://www.qiquanji.com/data/img/dmj/201903111552287575275251.jpg" alt="" />
	</body>
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

首页左侧固定导航缩放效果

网友评论