JSFiddle - React, Tailwind, and code Playground

HTML

<div class='container'>
    <div class='logoHolder'>
        <h1 id="logo1">This is the main logo</h1>
        <h2 id="logo2">This is the secondary logo</h2>
    </div>
</div>

CSS

.container{
    background-color:green;
    height:2000px;
}

.logoHolder{
    background-color:blue;
    position:fixed;
}

#logo2{display:none;}

JavaScript

$(document).on('scroll', function() {
                  if($(window).scrollTop()> 200) {
                      $('#logo2').show();
                      $('#logo1').hide();
                  }
                  else {
                      $('#logo2').hide();
                      $('#logo1').show();
                  }
                });