Endless auto scroll

I am trying to animate this template. I need it to scroll continuously and at the same time the GIF to stick at the top after scrolling (so we can see the GIF). Any help would be great! I have been working on this for awhile and am stuck. Here is the only code I am using:

<script>
var scrollDirection = 2, pageScroll;
pageScroll = function() {
window.scrollBy(0,scrollDirection); // horizontal and vertical scroll increments
scrolldelay = setTimeout(pageScroll,5); // scrolls every 100 milliseconds
if ( (window.scrollY === 0) || (window.innerHeight + window.scrollY) >= document.body.offsetHeight) 
{
}
}
pageScroll();
</script> 

and here is the file GIF.zip (1.0 MB)

It looks like the scrolling is working for me, so is the only remaining part to make the GIF sticky? If so, you can add this to your Head HTML:

<style>
.sticky {
	position: fixed !important;
}
</style>

And then on the Symbol element, give it a class name of sticky.

Hi Jonathan. Thank you for your reply. Yes the scrolling is working. Now about the GIF, I gave a class name to the element:

<div class="sticky"> Foo box </div>

but still the GIF doesn’t stick to the top. However I kept the “Fox boo” text and that appears to stick on the top. Would be grateful if you can help me.

thanks

He mentions the Symbol element. Did you put the class name on that. I’m assuming the element contains the GIF.

Hi DBear. Yes, I put the class inside the GIF (see image attached). Thank you

You must enter the class name “sticky” in the “Identitiy” pane of the inspector for that element. NOT inside the element.

2 Likes

Oh great! it works! thank you so much DBear. Cheers!