<!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>