<div class="scroll-container">
<div id="scroll-ufo"><img src="http://icon-icons.com/icons2/609/PNG/512/saucer_icon-icons.com_56331.png" /></div>
</div>
<div class="other-section"></div>
* { box-sizing: border-box; }
html,body {
height: 100%;
}
.scroll-container {
width: 100%;
height: 1500px;
background-color: #ccc;
position: relative;
overflow: hidden;
z-index: 999;
}
#scroll-ufo {
position: absolute;
transform: translate(150px,300px);
}
#scroll-ufo img {
width: 300px;
}
.other-section {
height: 3000px;
background-color: #333;
}
$(window).on('scroll',function (){
var wScroll = $(this).scrollTop();
//limit the ufo to slide only 200 px
if ((wScroll > 0) && (wScroll < 200)) {
$('#scroll-ufo').css('left',wScroll + 'px');
$('#scroll-ufo').css('top',wScroll + 'px');
}
});
This Pen doesn't use any external CSS resources.