Keeping an Image Frozen in Place when Scrolling - Issue with spacer element in Javascript & HTML

Hi everyone! I'm having issues with a spacer element that I have used successfully in the past. I have edited the HTML and Javascript such that the image stays frozen as the participant scrolls down. This allows participants to view the image as they rate them on various attributes. I pulled the original code from Stack Overflow (https://stackoverflow.com/questions/46286498/how-to-have-entire-item-in-qualtrics-remain-in-position-when-scrolling) - I am not very familiar with either HTML or Javascript, unfortunately.

The issue is that in both the preview mode and in the actual survey, and on multiple computers, the code to keep the image fixed works intermittently among the series of randomized images (each in a different block). It had been fully working in prior surveys (perhaps I did not randomize my blocks then, not sure). For example, if in the javascript, I put "$$('.image')[1]", it appears that the first image will not stay fixed, whereas all subsequent images will. If I put "$$('.image')[0]", the reverse appears to happen.

This is my Javascript code:
Qualtrics.SurveyEngine.addOnload(function() { $$('.image')[1].addClassName('fixed'); });

This is my HTML code:
<div class="image"><img src="link pasted here" style="width:240px;" /></div> <div class="image_spacer"> </div> <style type="text/css">.image{ background: white; width:100%; z-index: 1000; text-align:center; } .image.fixed{ position: fixed; top:0; left:0; } .image_spacer{ heigh t:120px; } </style>

Note that all of the questions are currently sharing the same code, except for the replacement of the link.

Thank you in advance for your help!