JSFiddle - React, Tailwind, and code Playground

by dhavaljani

HTML

<div class="social-float-parent">
    <div id="social-float">
        float...Sticky ISI
    </div>
</div>
<div id="footer">
 <p> Actual ISI stays and Floating portion can either be destroyed(or hidden)</p>
</div>

CSS

div.social-float-parent { width: 100%; height: 1000px; background: #f8f8f8; position: relative; }
div#social-float { width: 100%; position: fixed; 0; bottom: 0; background: #777; height: 40px;}
div#footer { width: 100%; height: 200px; background: #eee; }

JavaScript

function checkOffset() {
    if($('#social-float').offset().top + $('#social-float').height() 
                                           >= $('#footer').offset().top - 10)
        $('#social-float').css('position', 'absolute');
    if($(document).scrollTop() + window.innerHeight < $('#footer').offset().top)
        $('#social-float').css('position', 'fixed'); // restore when you scroll up
    $('#social-float').text($(document).scrollTop() + window.innerHeight);
}
$(document).scroll(function() {
    checkOffset();
});