JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
<div class="container-fluid table-container fade">

    <div class="row table-row">
        <div class="col-md-6 table-col text-center">
            <h1>Test text</h1>
        </div>
        <div class="col-md-6 table-col text-justify">
            <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis
                egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
                sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo.
                Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo
                    vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum
                rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar
                facilisis. Ut felis.</p>

        </div>

    </div>

</div>
<div class="container-fluid">

    <div class="row">
        <div class="col-md-12">
            <div class="followMeBar">a</div>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <div class="followMeBar">b</div>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <div class="followMeBar">c</div>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <div class="followMeBar">d</div>
            <br>
            <br>
            <br>
            <br>
            <br>
        ...

CSS

.table-container {
    display: table;
}

.table-container .table-row {
    height: 100%;
    display: table-row;
}

@media (min-width: 992px) {
    .table-container .table-row .table-col {
        height: 100vh;
        display: table-cell;
        float: none;
        vertical-align: middle;
        border: dashed #0f0f0f;
    }
}

.text-center {
    text-align: center;
}

.text-justify {
    text-align: justify;
}

/*Header*/

.fade {
    background-blend-mode: overlay;
    background: rgba(255, 255, 255, 1) url('https://www.gstatic.com/webp/gallery3/1.png') no-repeat center center;
    background-size: cover;
}

/*Sticky Header*/

.followMeBar {
    background: #222;
    border-bottom: solid 1px #111;
    border-top: solid 1px #444;
    padding: 1%;
    position: relative;
    z-index: 1;
    color: white;
}

.followMeBar.fixed {
    position: fixed;
    top: 0;
    width: 98%;
    z-index: 0;
}

.followMeBar.fixed.absolute {
    position: absolute;
}

JavaScript

var header = $(".fade");

$(document).ready(function () {

    var newStickies = new stickyTitles($(".followMeBar"));

    newStickies.load();

    // Fades out the header image
    $(window).scroll(function () {
        var scroll_top = $(document).scrollTop() / 400;
        header.css("background-color", 'rgba(255,255,255,' + (1 - scroll_top) + ')');
    });

    $(window).scroll(function () {
        newStickies.scroll();
    });
});

// Sticky header
function stickyTitles(stickies) {
    this.load = function () {
        stickies.each(function () {
            var thisSticky = $(this).wrap('<div class="followWrap" />');
            thisSticky.parent().height(thisSticky.outerHeight());
            $.data(thisSticky[0], 'pos', thisSticky.offset().top);
        });
    };

    this.scroll = function () {
        stickies.each(function (i) {
            var thisSticky = $(this),
                nextSticky = stickies.eq(i + 1),
                prevSticky = stickies.eq(i - 1),
                pos = $.data(thisSticky[0], 'pos');

            if (pos <= $(window).scrollTop()) {

                thisSticky.addClass("fixed");

                if (nextSticky.length > 0 && thisSticky.offset().top >= $.data(nextSticky[0], 'pos') - thisSticky.outerHeight()) {
                    thisSticky.addClass("absolute").css("top", $.data(nextSticky[0], 'pos') - thisSticky.outerHeight());
                }

            } else {

                thisSticky.removeClass("fixed");

                if (prevSticky.length > 0 && $(window).scrollTop() <= $.data(thisSticky[0], 'pos') - prevSticky.outerHeight()) {
                    prevSticky.removeClass("absolute").removeAttr("style");
                }
            }
        });
    }
}