JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="toFix"></div>
<div>

CSS

.spacer {
    height: 250px;
}

.toFix {
   position: relative;
    background-color: blue;
    height: 50px;
    width: 50px;
    -webkit-transition: all 1s; 
     -moz-transition: all 1s; 
     -ms-transition: all 1s; 
     -o-transition: all 1s; 
     transition: all 3s;  
}

.fixed {
    top: 0;
    left: 0;
    height: 100px;
    width: 100px;
}

JavaScript

$(document).ready(function() {
    $(document).on('scroll', function() {
        var $element = $(".toFix");
        if (isScrolledIntoView($element))
            $element.addClass('fixed');
        else
            $element.removeClass('fixed');
    })
});

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}