First attempt at a scroll indicator

<div class="code-block">
            <div id="scroll-progress-wrapper">
                <div id="scroll-progress"></div>
            </div>

            <article>
                
                <div class="scroll-progress-marker twenty-percent-marker"></div>
                <h2>Section Header</h2>

                <p>Duis vel justo sed lorem aliquet laoreet. Proin dictum ultricies est, nec sollicitudin urna pellentesque ut. Vestibulum bibendum odio quam, congue auctor diam commodo quis. Praesent felis est, lacinia vel maximus id, blandit sit amet sapien. Aenean vel hendrerit nulla, vel varius odio. Fusce sagittis consectetur neque ut dictum. Sed lacinia euismod efficitur. Etiam dapibus ex sed neque feugiat iaculis. Phasellus egestas aliquet urna, non aliquet tellus semper id. Proin sit amet rhoncus enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id sem in urna consectetur malesuada a id velit. Quisque posuere non quam non euismod. Phasellus non lacus non risus consectetur luctus. Sed urna libero, maximus at consequat sed, convallis sed felis.</p>

                <div class="scroll-progress-marker forty-percent-marker"></div>
                <h2>Section Header</h2>

                <p>Nulla facilisi. Phasellus scelerisque tincidunt ultricies. Nam elementum enim ac nulla aliquam dapibus at sit amet neque. Proin finibus faucibus eleifend. Duis consequat, dolor sit amet auctor consectetur, odio nibh accumsan ipsum, vitae tempor erat nulla quis diam. Duis vitae placerat nisi, ac pellentesque risus. Praesent id blandit purus. Nunc vestibulum nunc et volutpat tincidunt.</p>

                <div class="scroll-progress-marker sixty-percent-marker"></div>
                <h2>Section Header</h2>

                <p>Aenean mollis massa a porta fringilla. Proin non sollicitudin sapien. Duis in finibus sem. Praesent congue tristique dolor a faucibus. Morbi a dolor nec neque posuere efficitur. Pellentesque ut mattis diam. Morbi pellentesque hendrerit eros, sit amet faucibus ipsum commodo sit amet.</p>

                <div class="scroll-progress-marker eighty-percent-marker"></div>
                <h2>Section Header</h2>

                <p>Aenean purus sem, sagittis sit amet pretium eget, aliquam in odio. Suspendisse viverra pellentesque tellus eu commodo. Donec congue nisi ac vulputate pellentesque. Nam tempor maximus laoreet. Vivamus commodo convallis arcu, nec fringilla massa efficitur id. Quisque volutpat nisi eu est scelerisque, in lobortis massa auctor. Pellentesque sapien augue, semper in sem eget, cursus pharetra nisi. Nam eget imperdiet ante, id posuere purus.</p>

                <div class="scroll-progress-marker hundred-percent-marker"></div>
                <h2>Section Header</h2>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in arcu iaculis, sollicitudin ex id, elementum sem. Cras commodo dignissim risus eget ultricies. Sed et faucibus dolor. In lorem ante, tempus vel sollicitudin accumsan, pellentesque nec orci. Nulla in mauris lobortis, egestas metus pretium, ultrices ipsum. Aliquam eleifend sapien diam, sit amet posuere eros blandit vel. Mauris cursus placerat justo, laoreet rutrum augue dictum sodales. Donec sem quam, interdum nec dolor sed, laoreet fermentum purus. Aliquam ullamcorper orci sit amet sem imperdiet, eu sagittis ante scelerisque. Donec non aliquam eros, sit amet consequat lorem. Integer nibh risus, hendrerit non aliquam vitae, fermentum id sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse potenti. Morbi laoreet ullamcorper enim eu gravida. Etiam volutpat, magna sit amet placerat posuere, lectus nunc commodo urna, a egestas elit orci rutrum est. Cras tincidunt varius justo eget tempor.</p>

            </article>


            <footer>
                <p>This would be a footer.</p>
            </footer>
        </div>

.code-block {
                max-width: 60ch;
                margin: auto;
            }

            .code-block h2, p {
                margin-top: 0;
            }

            .scroll-progress-marker {
                background-color: black;
                mix-blend-mode: overlay;
                top: .25rem;
                width: 20%;
            }

            #scroll-progress, .scroll-progress-marker {
                height: .25rem;
            }

            #scroll-progress-wrapper {
                padding-top: .25rem;
            }

            #scroll-progress-wrapper, .scroll-progress-marker {
                position: sticky;
                position: -webkit-sticky;
                z-index: 1;                
            }
            
            #scroll-progress {
                background-color: darkorange;
                filter: contrast(120%);
            }

            #scroll-progress-wrapper {
                /* background-color: white; */
                background-image: linear-gradient(white, transparent);
                height: 1rem;
                top: 0;
            }
            
            .twenty-percent-marker { margin-left: 0%; }
            .forty-percent-marker { margin-left: 20%; }
            .sixty-percent-marker { margin-left: 40%; }
            .eighty-percent-marker { margin-left: 60%; }
            .hundred-percent-marker { margin-left: 80%; }

            .code-block footer {
                display: block;
                padding: 50vh 0 1rem 0;
                background-image: linear-gradient(transparent, rgba(245,245,245,.125));

            }

            article {
                background-color: white;
            }