JSFiddle - React, Tailwind, and code Playground

HTML

<input type="search" id="input">
        <div style="height: 2000px"></div>

CSS

.hiddenInput{position: fixed; opacity: 0;}

JavaScript

var inputTop, inputBottom;
        window.onload = function()
        {
            inputTop = $('#input').offset().top
            inputBottom = inputTop + $('#input').height();
        }

        function isScrolledIntoView(el)
        {
            var docViewTop = $(window).scrollTop();
            var docViewBottom = docViewTop + $(window).height();
            return ((inputBottom <= docViewBottom) && (inputBottom >= docViewTop));
        }
        function hideInput()
        {
            var el = $('#input');
            if ( isScrolledIntoView(el) ){
                el.removeClass();
                }else{
                el.addClass('hiddenInput');
                el.css({top: inputTop});
            }
        }
        window.onscroll = hideInput;