JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://fonts.googleapis.com/css?family=Raleway:200,300,400,500,600,700&amp;amp;subset=latin-ext"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/a6dbd6c5d5.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<div class="container-fluid">
        <div id="welcome">
            <div class="row justify-content-center">
                <div id="jk" class="col-5 text-center">Jan Kowalski</div>
            </div>
            <div id="socials" class="row justify-content-center sticky-top">
                <div class="col-1 text-center"><i class="fa fa-linkedin-square fa-3x icon" aria-hidden="true"></i></div>
                <div class="col-1 text-center"><i class="fa fa-envelope fa-3x icon" aria-hidden="true"></i></div>
                <div class="col-1 text-center"><i class="fa fa-github-square fa-3x icon" aria-hidden="true"></i></div>
            </div>
        </div>
        <div id="kurwachuj" class="row justify-content-center">
        
            <div class="col-10 text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida ligula a felis consectetur, et egestas nibh ornare. Vestibulum lorem lectus, viverra eu pellentesque eget, suscipit at mi. Cras sed erat rhoncus diam iaculis ultrices. Vestibulum ultrices, ante sit amet egestas ultricies, nisi turpis finibus odio, nec pellentesque ex mauris eget neque. Duis fringilla laoreet nisl. Nunc id aliquet est. Aliquam quis tellus vel ligula ullamcorper cursus. Aenean at nibh eget lectus eleifend ornare. Etiam congue tellus in faucibus elementum. Quisque tempus porttitor felis, luctus aliquam lectus volutpat ac. Etiam sed iaculis nisl. Nunc faucibus sem eget erat gravida, id porttitor risus aliquet. Phasellus ultrices vel sapien eu dapibus. Nulla lectus quam, maximus sed fermentum sed, tristique varius tortor.

Pellentesque turpis arcu, consequat sed tellus quis, faucibus volutpat neque. Integer eu...

CSS

* {
margin: 0;
padding: 0;
}

body {
    font-family: 'Raleway', sans-serif;
}
#welcome {
    position: relative;
    height: 100vh;
    width: 100%;
    max-width: 100%;
    padding: 0 0 0 0 !important;
    margin: 0 0 0 0 !important;
    background-color: #dddddd;
    border: 5px solid green;
}
#jk {
    position: relative;
    width: 100vw;
    max-width: 100%;
    font-size: 60px;
    font-weight: 500;
    letter-spacing: 4px;
    padding-top: 30vh;
    margin-bottom: 2vh;
}
#socials {
    width: 100vw;
    max-width: 100%;
    border: 5px solid red;
    margin: 0 0 0 0 !important;
    padding: 0 0 0 0 !important;
    background-color: #bbbbbb;
}
.icon:hover {
    color: #384245;
    cursor: pointer;
}

.glued {
    position: fixed;
    top: 0;
    z-index: 10;
}
#kurwachuj {
    position: relative;
    width: 100vw;
    max-width: 100%;
    background-color: #ffbbff;
    padding: 0 0 0 0 !important;
    margin: 0 0 0 0 !important;
}

JavaScript

$(document).on("scroll", function() {
            if($(this).scrollTop() + $("#socials").outerHeight() >= $("#welcome").outerHeight()) {
                $("#socials").removeClass("sticky-top");
                $("#socials").addClass("fixed-top");
            }
            else if($(this).scrollTop() + $("#socials").outerHeight() <= $("#welcome").outerHeight()) {
                $("#socials").removeClass("fixed-top");
                $("#socials").addClass("sticky-top");
            }
        });