Блог

Главная - Вопросы по программированию - Как создать непрерывные выдвижные элементы?

Как создать непрерывные выдвижные элементы?

#html #css

#HTML #css

Вопрос:

Я хотел бы создавать непрерывные выдвижные элементы. Кажется, я могу создать его просто отлично, но у меня возникают трудности с созданием чего-то большего. Эффект, который я ищу, заключается в том, что при прокрутке вниз элемент 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>

Комментарии:

1. вы ищете [ jsfiddle.net/tjbaezid/22emq8c0/1 ] как этот ?? это для трех элементов

2. Нет, извините, элементы должны извлекаться друг из друга. Вот так, но с тремя элементами, а не только с двумя. demo.tutorialzine.com/2013/08/slideout-footer-css

3. хорошо, понял .. 🙂

4. Возможно ли это?

5. Никогда не делал этого раньше. но если он работает для 2 элементов, то, очевидно, он работает для большего количества элементов. давайте попробуем 🙂