JSFiddle - React, Tailwind, and code Playground

HTML

<div class="hidden_icon icon">F</div>
<div class="content_wrapper">Some content</div>
<div class="visible_icon icon">F</div>
<div class="content_wrapper">Some content</div>
<div class="content_wrapper">Some content</div>
<div class="content_wrapper">Some content</div>
<div class="content_wrapper">Some content</div>

CSS

.content_wrapper
{
    border:1px solid red;
    height:200px;
}
.hidden_icon
{
    position:fixed;
    bottom:-200px;
    right:0px;
}

.icon
{
    width:50px;
    height:35px;
    color:#fff;
    background-color:blue;
    text-align:center;
    padding-top:15px;
}

JavaScript

var socialButton = $('.visible_icon');
var hiddenSocialButton = $('.hidden_icon');

$( window ).scroll(function()  {
    if($( window ).scrollTop() >= socialButton.offset().top + socialButton.outerHeight())
        hiddenSocialButton.stop().animate({'bottom': 0}, 100);
    else
         hiddenSocialButton.stop().animate({'bottom': -hiddenSocialButton.outerHeight()}, 100);
})