<h1>Scrolled Sections Indicator <small>ft.</small> CSS Only</h1>
<main>
	
<div id=passageWrapper>
	<strong>Sections Scrolled ↴</strong>
	<div id=passage><!-- scroll indicator bar --></div>
</div>

<div class=passageStops><!-- a fraction of the scroll indicator bar --></div>
<div class=sections>
	<img src="photo-1551643539-dd3f6ec351d1?w=668&q=80">
	<span class=captions>Red crossbill</span>
</div>

<div class=passageStops><!-- a fraction of the scroll indicator bar --></div>
<div class=sections>
	<img src="photo-1570527140771-020891229bb4?w=668&q=80">
	<span class=captions>Lilac-breasted Roller</span>
</div>

<div class=passageStops><!-- a fraction of the scroll indicator bar --></div>
<div class=sections>
	<img src="photo-1568085944940-8260537e7b1a?w=668&q=80">
	<span class=captions>Grey Heron</span>
</div>

<footer><p><strong>Photo Credits</strong><br>Uriel Soberanes <br>Madiba <br>Husen Siraaj <br>Via <i>Unsplash</i></p></footer>
	
</main>
.passageStops{
	background-color: black;
	mix-blend-mode: overlay;
	width: 33.3%;
	top: calc(1em + 3px);
}
#passage, .passageStops{ height: 10px; }
#passageWrapper, .passageStops {
	position: sticky; 
	position: -webkit-sticky; 
	z-index: 1; 
}
#passage{ background: violet; margin: 0 0 20px 0; filter: contrast(120%); }
#passageWrapper{
	background-color: white;
	height: 40px;
	top: 0px;
}
.passageStops:nth-child(4){ margin-left: 33.3%; }
.passageStops:nth-child(6){ margin-left: 66.6%; }


.sections{
	height: 400px; margin-bottom: 20px;
	text-align: center;
}
main{
	width: 300px; margin: auto; margin-top: 40px; padding: 20px;
	background-color: white; border-radius: 4px;
}
img{ height: inherit; object-fit: cover; filter: hue-rotate(260deg) brightness(130%); }
p{ text-align: right; }
h1{
	width: max-content; margin: auto;  
	font-size: 20pt; color: white; text-align: center; text-shadow: 4px 4px 1px black;
}
h1::before{
	width: 80%; height: .2em; display: block; content: ''; 
	position: relative; left: 30%; bottom: -1.2em;
	z-index: -1;  
	background-color: lime;
	transform: skewX(-30deg);
}
	.captions{
	display: block; margin-top: -1em;
	color: white; font-size: 16pt; font-weight: bolder; text-transform: uppercase;
}
body{
	padding-bottom: 400px;
	font-family: 'Bellefair', serif;
	background: black;
}
@media(min-width: 1800px){
	.sections{ height: 600px; }
	h1{ font-size: 26pt; }
	main{ width: 600px; }
	body{margin-bottom: 600px; font-size: 20pt; }
}

@media(max-width: 360px){main{ width: 90vw; padding: 5px; } }

/*fallback*/
img:empty{ width: 100%; background-image: repeating-linear-gradient(45deg, darkgrey 4px, grey 4px, grey 8px, darkgrey 8px, darkgrey 12px)  }
img:empty + span{ display: none; }
@supports not((position:sticky) or (position:-webkit-sticky)){
	body *:not(main){display: none;} 
	body{background: initial;}
	main::after{display: block; content:'THIS DEMO IS NOT SHOWN BECAUSE POSTION:STICKY IS NOT SUPPORTED IN YOUR BROWSER';  background-color: lightgrey; margin:auto; padding: 16px; }
	main::before{display: block; content:'🍿'}
}

External CSS

  1. https://fonts.googleapis.com/css?family=Bellefair&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.