Wix Classic: Pinned item interacting with other elements (heirarchy)

[user5434]

Hello, I’m trying to get an element that is PINNED TO SCREEN (open to other ways to get it in this position) to interact with other elements on the page as it scrolls — i.e. it would be in front of and/or behind items as you scroll down — all while remaining pinned in the center— like in this example

Jessie Maxwell Bearden | Artist + Creative Director

The name stays static/pinned while other elements pass under OR over it.

Any help/advice would be appreciated!

[StayLegitLoneWolf]

Hi i hope this helps

To reorder layers, click on the element and press (Ctrl + Arrow Up) to move it to the top layer, or (Ctrl + Arrow Down) to send it to the bottom layer.

or on left editor click on Layers
This will allow you to rearrange the layer order.

Additionally, if you have a pinned element, check if it’s pinned to the section or if you need it for the entire page."

[Pratham]

@StayLegitLoneWolf, they’ve mentioned Wix Classic in the title.

This is currently only doable on Wix Studio, not Wix Classic. The example website that you’ve provided is built on Studio itself.

[StayLegitLoneWolf]

Awww got it thanks for the look out . ill look into Wix Classic version @Pratham

[user5434]

I don’t think I’m able to just adjust the layers, as it’s pinned to the page, so it is on top by default and I am not able to drag layers above it…

[user5434]

Thanks @StayLegitLoneWolf, I am not able to reorder the layers when the item is pinned to the page (I need it pinned to the page not the section) — so the text remains on top of all layers unfortunately.

[StayLegitLoneWolf]

ahh , I see what you trying to do💯 @user5434

Hi jessie . I created a quick wix classic website to see the settings for the pin your talking about .

and sorry but It looks like there’s no way to keep your name pinned in the background section while scrolling.

I haven’t used Wix Classic in a few years, and it still seems quite limited. However, I know we can definitely achieve this in Wix Studio—there’s so much more flexibility!

I also reviewed your website, and it won’t take long for me to recreate it in Wix Studio if you like . There’s not much you need to do on your end; it’s more of an upgrade from Classic to Studio.

I’ll transfer the ownership to you, and you’ll be back up and running!

Let me know if you’d like me to work on the first page to show you as a draft !

[StayLegitLoneWolf]

Just to show . I created a quick draft just to test out the pin to scroll on wix studio for desktop

[https://staylegit.wixstudio.com/jessiebearden]

"Dont mind the fonts and videos its for example😊

It works if you decide to go to wix studio . it stays pin in the background while scroll …

At least we know we can make it happen because of the studio settings .

Hope you have a good day … If i figure out any wix classic trick ways ill let you know.

Also include is one with video

[user5434]

@StayLegitLoneWolf
Thank you SO much for your help.
I think I need to explain it a little better:

By the way, I’m not Jessie, I’m just trying to achieve the same effect as her

So,

I want the words to stay in the center of the SCREEN at all times — i.e. the effect achieved by pinning the text to the screen.
BUT
I also want it to be above some and below some of the images, like on Jessie’s site — so the effect achieved by making it sticky — i.e, still being able to adjust the position within layers.

Kind of a hybrid between the two sticky/pin effects.

The example you created is great — but I want some images on top and some below.

Does that make sense?

Thanks again for your help, it’s so appreciated!!!

[StayLegitLoneWolf]

Hi friend ! Yes, I understand exactly what you’re trying to achieve just there really is no feature in wix classic to do advance css with sticky .

The only thing I can think of accomplishing this in Wix Classic is doing show/hide with animations .

But does require you to turn on DEVMODE

It goes something like this demo.
Everything needs to be adjusted in this test site example . The objective was to get the pin to show and hide as we scroll over the photos and video ..

Home | My Site 14

For this example, I created six sections:

• Section 0: This first section is blank, but it contains the pinned #mainText. The section height is set to 1000px.
• Section 1 (and beyond): When you enter the viewport of a section (e.g., #photo1), the following code will run:

This will either show or hide the #mainText depending on your settings.

• As you continue scrolling to the next photo or video, the same logic applies—determining whether #mainText should appear or remain hidden based on the conditions you set.

This setup allows for a dynamic scrolling effect where #mainText appears or disappears as different sections come into view.

This was the only idea i can think of … Hope some information helps out .

copy and paste the code after you turn on devmode and rename the elements id

$w.onReady(function () {
    // When #section0 enters the viewport - Show and expand #mainText
    $w("#section0").onViewportEnter(() => {
        $w("#mainText").expand();
        $w("#mainText").show("fade");
    });

    // When #photo1 enters the viewport - Show and expand #mainText
    $w("#p1").onViewportEnter(() => {
        $w("#mainText").expand();
        $w("#mainText").show("fade");
    });

    // When #photo2 enters the viewport - Hide and collapse #mainText
    $w("#p2").onViewportEnter(() => {
        $w("#mainText").hide("blur").then(() => {
            setTimeout(() => {
                $w("#mainText").hide();
            }, 350); // 0.35 seconds
        });
    });

    // When #photo3 enters the viewport - Show and expand #mainText
    $w("#p3").onViewportEnter(() => {
        $w("#mainText").expand();
        $w("#mainText").show("fade");
    });

    // When #video4 enters the viewport - Hide and collapse #mainText
    $w("#p4").onViewportEnter(() => {
        $w("#mainText").hide("blur").then(() => {
            setTimeout(() => {
                $w("#mainText").hide();
            }, 350); // 0.35 seconds
        });
    });

    // When #video5 enters the viewport - Hide and collapse #mainText
    $w("#p5").onViewportEnter(() => {
        $w("#mainText").hide("blur").then(() => {
            setTimeout(() => {
                $w("#mainText").hide();
            }, 350); // 0.35 seconds
        });
    });
});