JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
</div>

CSS

body {
    height: 2000px;
}
.box {
    position: relative;
    width: 150px;
    height: 2000px;    
    background: blue;
}

JavaScript

jQuery(document).ready(function(){
                (function( $ ){
                                $.fn.myBox = function() {
                                        var box = $(this);
                                                jQuery(window).scroll(function () {
                                                                if ($(this).scrollTop() > 300) {
                                                                                box.fadeIn();
                                                                } else {
                                                                                box.fadeOut();
                                                                }
                                                });
                                };
                })( jQuery );
});
jQuery(".box").myBox();