<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');
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js