Pin question text at top of page | XM Community
Skip to main content

Hello,

I’m trying to sticky the text of a question stem so that it follows you while you scroll. I’m pretty new to HTML and Javascript, so I’m not entirely sure how to do it.

 

I’ve tried using the solution presented in this thread, but it’s giving me the error message "Invalid JavaScript! You cannot save until you fix all errors: Unexpected token ILLEGAL". I’m not sure what’s causing it, but I tried putting the '); on the same line as ('afterbegin', '. That got rid of the error, but then the code then didn’t seem to be doing anything.

 

I also tried using custom CSS to accomplish it. This is the code I’m using:

div.sticky {
    position: -webkit-sticky;
    position: sticky; 
    top: 0px;
    background-color: blue;
}

 

I put <div class=”sticky”> </div> around the question in the HTML editor, and I used the background color to confirm that it was linked properly, but the rest of the CSS doesn’t seem to be working.

 

I’d really appreciate any help with getting this to work. Thank you!

Some of the code in the post you linked isn’t displaying right because the web page is eating the HTML. Try adding the below to the OnReady section of a question on the page, updating “PASTE HERE” with the question text:

Qualtrics.SurveyEngine.addOnReady(function()
{
	/*Place your JavaScript here to run when the page is fully displayed*/

var base_element = document.querySelector(".SkinInner");
base_element.insertAdjacentHTML('afterbegin', '<div id="sticky_vid" style="position: sticky; top:0;" align="middle">');

var new_element = document.querySelector("#sticky_vid");

// Change the text below to add the element of your choice
new_element.innerHTML = "PASTE HERE";

// This is important, otherwise, the element you add will be at the back
base_element.style.zIndex = 1;
new_element.style.zIndex = 10;

});

Also, @JoseS , I’ve tackled a similar post in the past but it doesn’t look like the link is working. Can you please see if it can be restored?

Hello @Tom_1842, thank you for pointing out this post. We currently don’t have the ability to restore the post from our end, but we are actively working with our provider to make sure all posts affected by the migration (posted before early March) are restored correctly. 🙂

Thanks Jose, I can stop pointing out affected posts if they are all on your radar already.

That did it; thank you so much!

Leave a Reply


Terms & Conditions