JSFiddle - React, Tailwind, and code Playground

HTML

<div class="lines">
        <div class="lines-blue">
            <div id="line_0" class="line"></div>
            <div id="line_1" class="line"></div>
            <div id="line_2" style="top:300px" class="line"></div>
            <div id="line_3" style="top:350px" class="line"></div>
            <div id="line_4"  style="top:100px" class="line"></div>
            <div id="line_5"  style="top:400px" class="line"></div>
            <div id="line_6" style="top:290px" class="line"></div>
        </div>
        <div class="line" id="line-0-white"></div>
        <div class="line" id="line-1-white"></div>
        <div class="line" id="line-2-white"></div>
        <div class="line" id="line-3-white"></div>
        <div class="line" id="line-4-white"></div>
        <div class="line" id="line-5-white"></div>
        <div class="line" id="line-6-white"></div>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
    <script src="main.js"></script>

CSS

body {
    background-color: #22222a;
    position: relative;
    min-height: 3000px;
}
.lines-blue {
    position: relative;
}
.line {
    position: absolute;
}
.line:before {
    content: '';
    background-color: blue;
    position: fixed;
    width: 1px;
    height: 100%;
    min-height: 5vh;
    left: 0px;
    z-index: 0;
}
.line#line_0:before {
    left: 6%;
    height: 20%;
    
    
}
.line#line_1:before {
    left: 16%;
    height: 20%;
    
}
.line#line_2:before {
    left: 32%;
    height: 14%;
    
}
.line#line_3:before {
    left: 48%;
    height: 13%;
    
}
.line#line_4:before {
    left: 64%;
    height: 14%;
    
}
.line#line_5:before {
    left: 80%;
    height: 22%;
    z-index: 0;
}
.line#line_6:before {
    left: 94%;
    height: 22%;
    z-index: 0;
}
.line#line-0-white:before {
    left: 6%;
    height: 100%;
    background-color: #282830;
    z-index: -1;
}
.line#line-1-white:before {
    left: 16%;
    height: 100%;
    background-color: #282830;
    z-index: -1;
}
.line#line-2-white:before {
    left: 32%;
    height: 100%;
    background-color: #282830;
    z-index: -1;
}
.line#line-3-white:before {
    left: 48%;
    height: 100%;
    background-color: #282830;
    z-index: -1;
}
.line#line-4-white:before {
    left: 64%;
    height: 100%;
    background-color: #282830;
    z-index: -1;
}
.line#line-5-white:before {
    left: 80%;
    height: 100%;
    background-color: #282830;
    z-index: -1;
}
.line#line-6-white:before {
    left: 94%;
    height: 100%;
    background-color: #282830;
    z-index: -1;
}

JavaScript

$(window).on('scroll', function(){


    var line3top =  $("#line_3").offset().top;
    console.log(line3top);
    

    $("#line_0").css('top', "+=" + 10);
    $("#line_1").css('top', "+=" + 5);
    
    $("#line_2").css('top', "-=" + 3 + "px");
    $("#line_3").css('top', "+=" + 3 + "px");
    $("#line_4").css('top', "-=" + 10 + "px");
    $("#line_5").css('top', "+=" + 4 + "px");
    $("#line_6").css('top', "+=" + 15 + "px");
// });
});