JSFiddle - React, Tailwind, and code Playground

by lustre

HTML

<div id="whatif">
    <div class="block">
        <div class="content50">aaaa</div>
    </div>
    <div class="block2">
        <div class="content50">bbbb</div>
    </div>
</div>

<div id="topintro">
    <div class="greenblock">
        <div class="content50">aaaa</div>
    </div>
    <div class="greenblock2">
        <div class="content50">aaaa</div>
    </div>
    <div class="darkblock">
      <div class="whatif"></div>
      <div class="whatif2"></div>
      <div class="whatifabout_mask"></div>
      <div class="whatifabout">
        <div>
          <div>
            <p>We are Milton Bayer a multidisciplinary creative agency.</p>
            <p>We combine strategy, branding, design and digital innovation to bring people and brands together.</p>
          </div>
        </div>
      </div>
    </div>   
</div>

CSS

body {
    margin:0;
    padding:0;
}


#whatif .block {
    width:100%;
    height:300vh;
    position:relative;
    top:0;
}

.block .content50 {
    height:300vh;
    width:50%;
    background:rgba(255,0,0,0.8);
    z-index:1000;
    opacity:1;
}

#whatif .block2 {
    width:100%;
    height:100vh;
    position:relative;
    top:-100vh;
}

.block2 .content50 {
    height:100vh;
    width:50%;
    background:rgba(255,255,0,0.8);
    z-index:999;
}









#topintro {
    position:relative;
    z-index:2;
}
#topintro .darkblock {
    width:100%;
    height:375vh;
    position:relative;
    background:#3b414f url(http://dev.miltonbayer.com/sites/all/themes/miltonbayer/images/logo-l-gr.png) center center no-repeat fixed;
}
#topintro .darkblock .whatif {
    position:absolute;
    top:100vh;
    background:url(http://dev.miltonbayer.com/sites/all/themes/miltonbayer/images/logo-l-whatif.png) center center no-repeat;
    width:100%;
    height:215px;
    margin:0 0 0 0;
    opacity:0;
}
#topintro .darkblock .whatif2 {
    width:100%;
    height:100vh;
    position:fixed;
    top:0;
    z-index:-1;
    background:#3b414f url(http://dev.miltonbayer.com/sites/all/themes/miltonbayer/images/logo-whatif.png) center center no-repeat;
    opacity:0;
}
#topintro .darkblock .whatifabout {
    width:100%;
    height:100vh;
    z-index:3;
    display:table;
    position:relative;
    z-index:5;
    opacity:1;
    top:250vh;
}
#topintro .darkblock .whatifabout > div {
    height:100vh;
    display:table-cell;
    vertical-align:middle;
}
#topintro .darkblock .whatifabout > div div {
    width:100%;
    max-width:900px;
    padding:0 20px;
    margin:0 auto;
    box-sizing:border-box;
    margin:0 auto;
    vertical-align:middle;
    text-align:center;
    color:#fff;
    font-size:50px;
    font-style:italic;
    line-height:55px;
}
#topintro .darkblock .whatifabout_mask {
    position:fixed;
    z-index:2;
    top:0;
    background:#3b414f;
    width:100%;
    height:100vh;
   ...

JavaScript

var window_height = 0;
var offsetScroll = 0;
var whatif_offset = 0;
var whatif2_offset = 0;

jQuery(document).ready(function () {

    window_height = jQuery(window).height();
    whatif_offset = jQuery('#topintro .darkblock .whatif').offset().top;
    whatif2_offset = jQuery('#topintro .darkblock .whatif2').offset().top;
    whatifabout_offset = jQuery('#topintro .darkblock .whatifabout').offset().top;

    jQuery(document).scroll(function () {
        /*How far from the top you are */
        offsetScroll = jQuery(document).scrollTop();
        
        // Fade-in whatif2
        if ((offsetScroll / window_height) >= 1.75) {
            var opac = (offsetScroll / window_height) - 1.75;

            jQuery('#whatif .block2').css('z-index', 0).css('opacity', opac);
        } else {
            jQuery('#whatif .block2').css('opacity', 0);
        }
        
        
        
        
        
        

        // Scroll/fix/fade-in in whatif, when enters view
        if ((offsetScroll + window_height) > whatif_offset) {

            var perc = 100 / (window_height / 2);
            perc = perc * ((whatif_offset - offsetScroll) - window_height);
            perc = Math.abs(perc / 100);

            if (perc >= 1) {
                jQuery('#topintro .darkblock .whatif').css('position', 'fixed').css('top', (window_height / 2) + 'px').css('opacity', 1);
            } else {
                jQuery('#topintro .darkblock .whatif').css('position', 'absolute').css('top', '100vh').css('opacity', perc);
            }

        }

        // Fade-in whatif2
        if ((offsetScroll / window_height) >= 1.75) {
            var opac = (offsetScroll / window_height) - 1.75;

            jQuery('#topintro .darkblock .whatif2').css('z-index', 0).css('opacity', opac);
        } else {
            jQuery('#topintro .darkblock .whatif2').css('opacity', 0);
        }

        // Scroll/fix/fade-in in whatifabout
        if ((offsetScroll + window_height) > whatifabout_offset) {

      ...