JSFiddle - React, Tailwind, and code Playground

HTML

<div class="social">
        <p>Social links here</p>
    </div>
    
    <div class="title">
        <p>Some text</p>
    </div>
</div>
<div class="banner">
    <img src="http://lorempixel.com/920/700/" alt="">
</div>
<div class="dddddffffwwww"></div>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>

CSS

html,
body {
    height: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
}


div img {
    display: block;
    width: 100%;
}

div.banner {
    width: 100%;
    position: relative;
}

div.social, div.title {
    position: fixed;
    z-index: 10;
}

div.social {
    right: 40px;
    bottom: 40px;
    background: #e4f;
}

div.title {
    left: 40px;
    bottom: 40px;
    background: #e4f;
}
div.dddddffffwwww {
  height: 700px;
  width: 100%;
  background-color: pink;
}

JavaScript

var divs = $('.social, .title');
$(window).scroll(function(){
   var percent = $(document).scrollTop() / ($('.dddddffffwwww').height() - $(window).height());
   divs.css('opacity', 1 - percent);
});