<div class="body-wrap">
		<h1 class="title">This heading changes colour as you vertically scroll the page</h1>
	
		<section class="box box--1">
			<div class="box__bd">
				<h2><abbr title="Too long, didn't read">TL;DR</abbr></h2>
				<p>This is a pure-CSS solution for having a heading change colour as it scrolls past backgrounds of different colours. It <strong>does not</strong> require multiple copies of the heading in different colours.<p>
				<ol>
					<li>Apply <code>position: sticky</code> to the heading in question. Remember to make sure its parent also contains all the backgrounds you want it to scroll past.</li>
					<li>Each background colour that the heading scrolls by should be in a wrapper. This demo uses <code>&lt;section class="box"&gt;</code>. Remember to add appropriate padding/spacing so that the heading does not block any content in your wrapper.</li>
					<li>Use the <code>:after</code> selector to add a pseudo-element for each wrapper that spans the wrapper height and is at least as wide as the heading. Also give this pseudo-element an appropriate value for <code>backdrop-filter</code> that corresponds to the colour change you want. This demo simply inverts heading colour.</li>
					<li>Final adjustments: add a <code>z-index</code> to both the heading and the pseudo-element so that the heading is <em>between</em> the pseudo-element and the wrapper.</li>
				</ol>
			</div>
		</section>
		
		<section class="box box--2 no-colour-change">
			<div class="box__bd">
				<h2>A few additional notes</h2>
				<ol>
					<li>The pseudo-element will also change the background colour of the wrapper. This may or may not be desired. One work-around is to make the pseudo-element span the entire width of the wrapper and then adjust your wrapper background colour accordingly.</li>
					<li>If the width of the pseudo-element increases after page load (e.g. by making the browser wider), <code>backdrop-filter</code> <em>does not</em> apply in the newly created space.</li>
					<li>Any text under the pseudo-element is not selectable.</li>
				</ol>
			</div>
		</section>
	
		<section class="box box--3">
			<div class="box__bd">
				<p>We spend so much of our life looking - but never seeing. Let's do that again. I was blessed with a very steady hand; and it comes in very handy when you're doing these little delicate things. Everyone is going to see things differently - and that's the way it should be. Just think about these things in your mind - then bring them into your world. You're meant to have fun in life.</p>

				<p>In life you need colors. That easy. Automatically, all of these beautiful, beautiful things will happen.</p>

				<p>It's all a game of angles. Maybe we got a few little happy bushes here, just covered with snow. Maybe there was an old trapper that lived out here and maybe one day he went to check his beaver traps, and maybe he fell into the river and drowned.</p>

				<p>Nice little clouds playing around in the sky. Now then, let's play. Let's have a little bit of fun today.</p>
			</div>
		</section>


		<!-- Empty lines to allow heading to scroll further down the page. -->
		<p><br/></p>
		<p><br/></p>
		<p><br/></p>
		<p><br/></p>
		<p><br/></p>
		<p><br/></p>
		<p><br/></p>
		<p><br/></p>
		<p><br/></p>
		<p><br/></p>
		<p><br/></p>
		<p><br/></p>
		<p><br/></p>
		<p><br/></p>
		<p><br/></p>
		<p><br/></p>
		<p><br/></p>
		<p><br/></p>
		<p><br/></p>
		<p><br/></p>
		<p><br/></p>
		<p><br/></p>
		<p><br/></p>
		<p><br/></p>
		<p><br/></p>
		<p><br/></p>
		<p><br/></p>
		<p><br/></p>
		<p><br/></p>
		<p><br/></p>
		<p><br/></p>
	</div>