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 scrolls.

I've been able to get the entire image to remain in place using something like this HTML code:

<html>
<style>

.image{position: fixed; background: white;}

</style>

<div class = "image">
<img src="LOCATION OF IMAGE FILE" style="width: 395px; height: 395px;" />
</div>
</html>

But this freezes the image itself in a very awkward place (it actually does this in the editor itself, which blocks me from doing anything else). Is there a way to keep the presentation of the item exactly the same as it is normally, but just keep it in place?

Edit: This is how it should appear, as a separate item from the questions to follow. I would then like it to remain frozen in place while the user can scroll through the questions.

This shows how it currently appears. The image is frozen in place, but not where it should appear (i.e., above and separated from the questions that follow.

回答1:

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

<div class = "image">
    <img src="LOCATION OF IMAGE FILE" width="395px" height="395px"/>
</div>

<div class = "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:

<div class = "image">
    <img src="IMAGE LOCATION HERE" width="395px" height="395px"/>
</div>

<div class = "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');
    }
});
});

回答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.

来源：https://stackoverflow.com/questions/46286498/how-to-have-entire-item-in-qualtrics-remain-in-position-when-scrolling

标签

javascript

html

prototypejs

qualtrics