JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://www.appelsiini.net/download/jquery.viewport.mini.js"></script>
  <section id="section-1">
    <div class="sticky-info">Sticky</div>
  </section>
  <section id="section-2">
  </section>

CSS

.sticky-info {
        position: fixed;
        bottom: 20px;
        width: 100%;
        z-index: 999;
        padding: 8px;
        text-align: center;
        background: #fd0;
    }

    #section-1 {
        background: green;
        min-height:1000px;
    }

    #section-2 {
      min-height: 1000px;
      background-color:red;
    }

JavaScript

$(window).scroll(function () {
        if ($('#section-2').is(':in-viewport')) {
              $( ".sticky-info" ).fadeOut( 100, function() { });
        } else {
              $( ".sticky-info" ).fadeIn( 100, function() { });
        }
    });