Question

我正在使用Qualtrics，并且即使在页面上滚动多个后续问题时，也希望冻结页面顶部的图像（看起来像横幅）。

对于图像，我具有以下HTML代码，对于后续问题，我具有javascript，但不适用于我。该图像显示出来，但是当我滚动浏览后续问题时它不会冻结。

图片HTML：

<div class = "image">
<img src="image location" width= "700px" height="98px" />
</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');
}
});
});

有什么想法吗？预先感谢大家！

在滚动过程中冻结图像

0 个答案: