Edit in JSFiddle

<div id="wrapper">
	<div class="first"></div>
	<div class="second"><div></div></div>
	<div class="third">
		<div>
			<div>
				<h2>Посмотрите поближе.</h2>
				<p>Два размера. Четыре цвета. Корпус из стекла и нержавеющей стали.</p>
			</div>
		</div>
	</div>
</div>
#wrapper{max-width:500px;margin:0 auto;background: #111;padding: 30px;font-family:"SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:normal;}
.first{height: 200vh;background: black;background-image: url(https://www.nicepng.com/png/full/97-973300_broken-phone-png-iphone-5s-broken-png.png);background-position: center top 70px;background-attachment: fixed;background-repeat: no-repeat;background-size:contain;}
.second{position:relative;z-index:2;background: #111;margin-top: -100vh;padding-top: 30px;padding-bottom:30px;}
.second>div{min-height: 100vh;background: red;}
.third{margin-top:-100vh;height: 200vh;padding-top:30px;background:#111;}
.third>div{background: black;position: sticky;height: 100vh;  top: 0;display: flex;
    flex-wrap: wrap;
    align-items: center;}
.third>div>div{padding-bottom:30px;}
h2{padding:50px 0 0 30px;margin:0;color:#f5f5f7;font-size:38px;}
p{color:#aaa;font-size:19px;padding:0 30px;}