I would like an image to become fixed where it is once it appears on screen during a scroll, but become unfixed if the user scrolls back up.

However, when I use a JS on scroll function to change the image position to fixed, it suddenly "jumps"/resizes, and I'm not sure why. My fix was to create variables that alter the width and left values of the image after it becomes fixed, but I want to do this will multiple images on a page and each one seems to require a different width and left adjustment. I'm not sure what is conceptually causing this issue. Simply resetting the width and left to their original values does not work. Does a fixed position resize and image. 

Here is a [jsfiddle](https://jsfiddle.net/k56qkk5b/1/) of the issue. And here is the code. JS:

```
 var sitckyImageWidth = "38.4%";
  var normalImageWidth = "48%";

document.addEventListener("scroll", function(){

  var windowTop = $(window).scrollTop();
  var  windowWidth = window.innerWidth;
  var  windowHeight = window.innerHeight;

   //loop through each div and grab top/bottom/midpoint info and find id
   $('.articles').each(function(i){
     var top = $(this).offset().top;
     var bottom = top+ $(this).height();
     var midPoint = (bottom+top)/2;
     var thisId = this.id;
     var newId;

    //use container div info to find media info
     var newId = thisId+"Media";
     var sectionImage=document.getElementById(newId);
     var sectionImageTop = $(sectionImage).offset().top;

      //if article is on the page, change position to fixed and set top position
     if (top<=windowTop&&bottom>windowTop){

       $(sectionImage).css("top","10px")
       $(sectionImage).css("position","fixed")
       //$(sectionImage).css("width",sitckyImageWidth)
     }
      //if container is not at top of the page, return to relative
     if (bottom<=windowTop||(bottom>windowTop&&top>windowTop)){
       $(sectionImage).css("position","relative")
     }
   })
}); //end scroll

```