Sticky Text section on scroll effect

[Shreyan]

I want to have a sticky text with transparent background fixed to the centre of screen on my landing page that remains fixed even when other sections are scrolled to a certain point.

my website view- https://xzp950dgwixa14cj-83195527451.shopifypreview.com

website to understand the feature what is want - https://www.acnestudios.com/us/en/home

Thank you.

[Shreyan]

Sure

[namphan]

Hi @Shreyan,

Please go to Customize > Add section > Custom Liquid > Add code:

Code:

<p>Heading</p>
<style>
.section-{{ section.id }}-padding {
position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    font-size: 8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
</style>