How To Have Entire Item In Qualtrics Remain In Position When Scrolling?

I am presenting an image embedded in a descriptive text item, followed by several questions about that image. I would like that item to remain in place while the participant scroll

Solution 1:

You can use a spacer element to align the starting height of other elements. For example:

<divclass = "image"><imgsrc="LOCATION OF IMAGE FILE"width="395px"height="395px"/></div><divclass = "image_spacer">
    This is a spacer element
</div><style>.image{
        position: fixed; 
        background: white;
        z-index: 1000;
    }
    .image_spacer{
        height: 395px; 
        visibility: hidden;
    }
</style>

Visually speaking, I may recommend adding a width of 100% to your image div as well, so that other elements are fully covered when you scroll.

To fix at the top on scroll, do the following:

<divclass = "image"><imgsrc="IMAGE LOCATION HERE"width="395px"height="395px"/></div><divclass = "image_spacer">
    This is a spacer element
</div><style>.image{
        background: white;
        width:100%;
        z-index: 1000;
        text-align:center;
    }
    .image.fixed{
        position: fixed;
        top:0;
        left:0;
    }
    .image_spacer{
        height: 395px; 
        visibility: hidden;
        display:none;
    }
    .image_spacer.fixed{
        display:block;
    }
</style>

In addition, add this to the JavaScript for the question:

Qualtrics.SurveyEngine.addOnload(function()
{
var space = $$('.image')[0].cumulativeOffset().top;
console.log(space);
window.addEventListener("scroll", function(){
    if( document.body.scrollTop >  space){
            $$('.image')[0].addClassName('fixed');
            $$('.image_spacer')[0].addClassName('fixed');
    }
    else{
            $$('.image')[0].removeClassName('fixed');
            $$('.image_spacer')[0].removeClassName('fixed');
    }
});
});

Solution 2:

Did you try using the Text/Graphic option?

As I am seeing no problem if I add an image that way, and the survey questions are in their place, check the image below for reference.