hhh,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
.wrapper {
width: 400px;
height: 400px;
overflow: auto;
border: 1px dashed #ccc;
position: relative;
z-index: 10;
}
.wrapper-inner {
position: relative;
height: 150%;
}
.drop {
width: 50px;
height: 50px;
border-radius: 100%;
background: blue;
position: fixed;
top: 20px;
left: 20%;
margin-left: -25px;
z-index: 1;
}
.drop::after {
position: absolute;
bottom: -21px;
left: 13px;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 13px;
border-color: blue transparent transparent transparent;
}
</style>
<div class="wrapper">
<div class="wrapper-inner">
<div class="drop"></div>
</div>
</div>
<script>
var mainScroll = $('.wrapper'),
drop = $('.drop'),
height = mainScroll.height()-drop.height()-19,
i = 0;
mainScroll.scroll(function (){
!i && (i = mainScroll.scrollTop())&& downDrop();
});
function downDrop() {
drop.css('top', 19).animate({ 'top' : '+='+height
}, 3000, function() { i = 0; mainScroll.scrollTop(0); drop.css('top', 19)
});
}
</script>
</body>
</html>