JSFiddle - React, Tailwind, and code Playground
HTML
<div id="scroll">
<a href="#" class="move">Move</a>
<div id="pageWrap">
<div id="follow"></div>
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
</div>
</div>
CSS
#scroll{
height: 300px;
width: 500px;
border: 1px solid red;
overflow: hidden;
}
#scroll #pageWrap{
border: 1px solid green;
background-color: black;
height: 400px;
width: 500px;
position: relative;
overflow: scroll;
}
#scroll #pageWrap .page{
width: 500px;
height: 1000px;
border: 1px solid blue;
}
#scroll #follow{
width: 100px;
height: 90px;
border: 1px solid yellow;
position: absolute;
top: 10px;
left: 50%;
margin-left: -50px;
background-image: url('http://cdn.geekinsider.com/wp-content/uploads/2012/12/apple_bite2.jpg');
background-size: cover;
background-repeat: no-repeat;
}
JavaScript
jQuery('#pageWrap').scroll(function(){
console.log('test');
jQuery('#follow').css({
top: jQuery(this).scrollTop() + 20
});
});
jQuery('.move').click(function(){
jQuery('#pageWrap').animate({
scrollTop: jQuery('.page').height() * jQuery('.page').length
}, 4000);
});