Фиксированный плавающий сайдбар на чистом CSS

Небольшой практический пример.
HTML-верстка включает ключевые базовые элементы: шапку, блок с основным контентом, сайдбар и футтер.

    <article>
        <div class="container-fluid">
            <div class="row">
                <div class="col">
                    <div class="title-section">
                        <h1>Header</h1>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-7">

                    <div class="content-section">
                        <h2>Content Section</h2>
                    </div>
                </div>
                <div class="col-5">

                    <div class="sidebar-item">
                        <div class="make-me-sticky">
                            <h3>Sidebar</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mt-5">
                <div class="col">
                    <div class="title-section">
                        <h1>Footer</h1>
                    </div>
                </div>
            </div>
        </div>
    </article>

Стили оформления. Обратите внимание на строки с 11 по 24.

        .content-section {
            min-height: 1200px;
        }

        .sidebar-section {
            position: absolute;
            height: 100%;
            width: 100%;
        }

        .sidebar-item {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .make-me-sticky {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            padding: 0 15px;
        }

        body {
            background: #fff;
        }

        article {
            background: #f1f1f1;
            border-radius: 12px;
            padding: 25px 0 600px;
        }

        .title-section,
        .content-section,
        .sidebar-section {
            background: #fff;
        }

        .title-section {
            text-align: center;
            padding: 50px 15px;
            margin-bottom: 30px;
        }

        .content-section h2 {
            text-align: center;
            margin: 0;
            padding-top: 200px;
        }

        .sidebar-item {
            text-align: center;
        }
        .sidebar-item h3 {
            background: gold;
            max-width: 100%;
            margin: 0 auto;
            padding: 80px 0 80px;
            border-bottom: solid 1px #fff;
        }

И в завершении — подключим актуальную версию Bootstrap:

<link rel="stylesheet" href="/bootstrap/4.1.3/css/bootstrap.min.css">

Посмотреть демо