项目开发实录 将其简化为一个demo方便后续使用
简化淘宝顶部的淡入淡出并将其修改为两个不同盒子之间的切换,毕竟实际项目实际操作嘛。
下面的代码块为简略版的demo,直接复制粘贴即可实现效果(移动端喔)
后续会有另外一种解决办法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>滚动展示</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
header {
width: 100%;
height: 50px;
display: flex;
background-color: skyblue;
position: fixed;
top: 0;
z-index: 2;
}
header li {
flex: 1;
line-height: 50px;
text-align: center;
}
section {
width: 100%;
height: 100%;
}
.one {
width: 100%;
background-color: #90EE90;
overflow-y: hidden;
position