Webrow,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.height{
width:300px;
height:3000px;
background:#FFF;
}
.ret_block{
height:65px;
width:65px;
position: fixed;
opacity:0;
right:100px;
bottom: -70px;
}
.ret_block.up{
transition:bottom 2s cubic-bezier(.35,1.88,.51,.97), opacity 3s ease-out;
opacity: 1;
bottom: 100px;
}
.ret{
background:#80c111;
opacity:0.9;
border-radius: 50% !important;
cursor:move;
height:65px;
position:absolute;
width:65px;
z-index:9999;
cursor:pointer;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var a = $(".ret_block").addClass("up"),
b,
c = $(window).scrollTop();
$(window).scroll(function() {
window.clearTimeout(b);
a.css({bottom : Math.min($(window).height()-65,Math.max(-65,c - $(window).scrollTop()) ) })
b = window.setTimeout(function() {
a.css({bottom : ""});
c = $(window).scrollTop();
}, 200)
}).trigger("scroll")
});
</script>
</head>
<body>
<div class="height">
<div class="ret_block">
<div class="ret"> </div>
</div>
</div>
</body>
</html>
|