Hello,
I am wondering how to freeze an image on the top of a questionnaire on Qualtrics.
I want to let survey participants keep seeing the frozen image on the top and evaluate it with several questions under the images (and the participant can only use scroll up and down for the questions).
I cannot use a header option of Qualtrics because each page has a different image on the top.
I found and added some HTML and JS codes. It works on Safari, but not Google Chrome and Internet Explorer.
<div class="image">IMAGE HERE</div>
<div class="imagespacer">
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;}
.imagespacer{height:395px; visibility:hidden; display:none;}
.imagespacer.fixed{display:block;}
</style>
-----------------------------------------------------
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');
$$('.imagespacer')[0].addClassName('fixed');
}
else{
$$('.image')[0].removeClassName('fixed');
$$('.imagespacer')[0].removeClassName('fixed');
}
});
});
I added -webkit-transform: translateZ(0); but still it does not work at all.
Could you please provide any idea to freeze the image on the top?
Thank you for your attention.
