Question

我想制作连续的拉出元素。我似乎能够创造一个很好，但是我很难创造出更多。我所追求的效果是当你向下滚动时，项目2从下面显示，然后当你继续滚动时，项目3从项目2下面显示出来。我希望这样可以继续使用我添加的项目。

这是第一个片段，共有3个项目。它无法正常工作：

html, body{
	padding: 0;
	margin: 0;
}

.text-center{
	text-align: center;
}
#item-1{
	position: relative;
	height: 500px;
	margin-bottom: 500px;
	background-color: white;
	border-bottom: 5px solid gray;
}
#item-2{
	background-color: green;
	border-bottom: 5px solid gray;
	z-index: -1;
}
#item-3{
	background: yellow;
	z-index: -1;
}
.slide-item{
	text-align: center;
	height: 500px;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Test</title>
		<link rel="stylesheet" href="style.css" type="text/css">
	</head>
	<body>

	<div id="item-1" class="text-center">
		First item!
		<div id="item-2" class="slide-item text-center">
			Second item!
			<div id="item-3" class="slide-item text-center">
				Third item!
			</div>
		</div>
	</div>
	
	<script src="//ajax.googleapis.com/ajax/libs/jquery/3.0/jquery.min.js" type="text/javascript"></script>
	</body>
</html>

这是另一个片段，只有两个项目，似乎正常工作，但文字没有显示（但在我的测试页面上显示正常）。

html, body{
	padding: 0;
	margin: 0;
}

.text-center{
	text-align: center;
}
#item-1{
	position: relative;
	height: 500px;
	margin-bottom: 500px;
	background-color: white;
	border-bottom: 5px solid gray;
}
#item-2{
	background-color: green;
	border-bottom: 5px solid gray;
	z-index: -1;
}
#item-3{
	background: yellow;
	z-index: -1;
}
.slide-item{
	text-align: center;
	height: 500px;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Test</title>
		<link rel="stylesheet" href="style.css" type="text/css">
	</head>
	<body>

	<div id="item-1" class="text-center">
		First item!
		<div id="item-2" class="slide-item text-center">
			Second item!
		</div>
	</div>
	
	<script src="//ajax.googleapis.com/ajax/libs/jquery/3.0/jquery.min.js" type="text/javascript"></script>
	</body>
</html>

如何制作连续拉出物品？

0 个答案: