滚动时如何让 Qualtrics 中的整个项目保持原位？

Question

我正在展示嵌入在描述性文本项中的图像，然后是关于该图像的几个问题。我希望该项目在参与者滚动时保持原位。

我已经能够使用类似这样的方法 HTML 代码将整个图像保留在原位：

<html>
<style>

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

</style>

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

但这会将图像本身冻结在一个非常尴尬的地方（它实际上是在编辑器本身中这样做的，这阻止了我做任何其他事情）。有没有办法让项目的呈现方式与平时完全一样，但只是保持原样？

编辑： 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.

Answer 1

您是否尝试使用 Text/Graphic 选项？

如果我以这种方式添加图片，我认为没有问题，并且调查问题就位，请查看下图以供参考。

Answer 2

您可以使用间隔元素来对齐其他元素的起始高度。例如：

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

从视觉上来说，我可能会建议您也为您的图片添加 100% 的宽度 div，这样当您滚动时其他元素就会被完全覆盖。

要固定在滚动顶部，请执行以下操作：

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

此外，将此添加到问题的 JavaScript 中：

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');
    }
});
});

滚动时如何让 Qualtrics 中的整个项目保持原位？

How to have entire item in Qualtrics remain in position when scrolling?

javascript

html

prototypejs

qualtrics