JSFiddle - React, Tailwind, and code Playground

by treeface

HTML

<div id="test1">test1</div>
<div id="buffer"></div>
<div id="test2">test2</div>
<div id="slidey_thing">yayyyy</div>

CSS

#buffer {
    height:1500px;
    width:10px;
}
#slidey_thing {
    position:fixed;
    width:200px;
    right:-220px;
    bottom:5px;
    background-color:#f5fef9;
    border:1px solid silver;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    padding:5px;
}

JavaScript

$(document).ready(function() {
    var docHeight = $(document).height();
    var animating = false;
    
    $(document).scroll(function() {
        if ($(document).scrollTop() / docHeight > .6) {
            if (!animating) {
                animating = true;
                $('#slidey_thing').animate({right:'5px'}, 500, function() {animating = false});
            }
        } else {
            if (!animating) {
                animating = true;
                $('#slidey_thing').animate({right:'-220px'}, 500, function() {animating = false});
            }
        }
    });
});