CSS Sticky

<section class="o-section">
    <div class="o-wrapper">
        <div class="o-grid">
            <div class="o-grid__item | o-focus o-focus--lg">
                <p>For this demo to be effective, we need to bloat the page with content to show how the sticky element works.</p>

                <section class="o-section o-section--xl" id="sticky_1">
                    <div class="o-grid">
                        <div class="o-grid__item o-focus o-focus--lg o-flow">
                            <h2 class="u-heading u-beta">Title 1</h2>
                            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa perferendis tempore non quidem optio soluta nemo commodi doloribus. Odio expedita in, molestias ea dolore asperiores distinctio fugit similique adipisci ratione?</p> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa perferendis tempore non quidem optio soluta nemo commodi doloribus. Odio expedita in, molestias ea dolore asperiores distinctio fugit similique adipisci ratione?</p> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa perferendis tempore non quidem optio soluta nemo commodi doloribus. Odio expedita in, molestias ea dolore asperiores distinctio fugit similique adipisci ratione?</p> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa perferendis tempore non quidem optio soluta nemo commodi doloribus. Odio expedita in, molestias ea dolore asperiores distinctio fugit similique adipisci ratione?</p> 
                        </div>
                    </div>
                </section>
                <section class="o-section o-section--xl" id="sticky_2">
                    <div class="o-grid">
                        <div class="o-grid__item o-focus o-focus--lg o-flow">
                            <h2 class="u-heading u-beta">Title 2</h2>
                            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa perferendis tempore non quidem optio soluta nemo commodi doloribus. Odio expedita in, molestias ea dolore asperiores distinctio fugit similique adipisci ratione?</p> 
                            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa perferendis tempore non quidem optio soluta nemo commodi doloribus. Odio expedita in, molestias ea dolore asperiores distinctio fugit similique adipisci ratione?</p>
                            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa perferendis tempore non quidem optio soluta nemo commodi doloribus. Odio expedita in, molestias ea dolore asperiores distinctio fugit similique adipisci ratione?</p> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa perferendis tempore non quidem optio soluta nemo commodi doloribus. Odio expedita in, molestias ea dolore asperiores distinctio fugit similique adipisci ratione?</p>
                        </div>
                    </div>
                </section>
                <section class="o-section o-section--xl" id="sticky_3">
                    <div class="o-grid">
                        <div class="o-grid__item o-focus o-focus--lg o-flow">
                            <h2 class="u-heading u-beta">Title 3</h2>
                            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa perferendis tempore non quidem optio soluta nemo commodi doloribus. Odio expedita in, molestias ea dolore asperiores distinctio fugit similique adipisci ratione?</p> 
                            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa perferendis tempore non quidem optio soluta nemo commodi doloribus. Odio expedita in, molestias ea dolore asperiores distinctio fugit similique adipisci ratione?</p>
                            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa perferendis tempore non quidem optio soluta nemo commodi doloribus. Odio expedita in, molestias ea dolore asperiores distinctio fugit similique adipisci ratione?</p> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa perferendis tempore non quidem optio soluta nemo commodi doloribus. Odio expedita in, molestias ea dolore asperiores distinctio fugit similique adipisci ratione?</p>
                        </div>
                    </div>
                </section>
            </div>
            <!-- Sticky Container -->
            <div class="o-grid__item o-focus | u-ml-auto">
                <ul class="o-list-stacked | u-stick">
                    <li class="o-list__item">
                        <a class="" href="#sticky_1">Link Item 1</a>
                    </li>
                    <li class="o-list__item">
                        <a class="" href="#sticky_2">Link Item 2</a>
                    </li>
                    <li class="o-list__item">
                        <a class="" href="#sticky_3">Link Item 3</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</section>