<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body style="margin:0;padding:0;height:2000px;">
<div style="height: 500px;background: #ccc;">this is div</div>
<img src="baloons.jpg" width="500">
</body>
<script src="jquery-1.12.4.min.js"></script>
<script>
$.fn.extend({
fixedPos : function(param){
var $offTop = Number(param)>=0 ? param : 0;
this.each(function(){
var $obj = $(this);
var offTop = $obj.offset().top - $offTop;
var offLeft = $obj.offset().left;
$(window).on("scroll",function(){
var scrollTop = $(window).scrollTop();
if(scrollTop >= offTop){
$obj.css({'position':'fixed','left':offLeft,'top':$offTop});
}else{
$obj.css('position','static');
}
})
})
}
})
$("img").fixedPos(40);
</script>
</html>