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

**URL:** <https://forum.wixstudio.com/t/wix-classic-pinned-item-interacting-with-other-elements-heirarchy/69924>\
**Category:** Ask the community\
**Tags:** question\
**Created:** [March 26, 2025, 5:52pm UTC](https://forum.wixstudio.com/t/wix-classic-pinned-item-interacting-with-other-elements-heirarchy/69924 "2025-03-26T17:52:14Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![user5434](https://avatars.discourse-cdn.com/v4/letter/u/a9adbd/32.png) [@user5434](https://forum.wixstudio.com/u/user5434)\
**Post date:** [March 26, 2025, 5:52pm UTC](https://forum.wixstudio.com/t/wix-classic-pinned-item-interacting-with-other-elements-heirarchy/69924/1 "2025-03-26T17:52:14Z")

</div>

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](https://www.jessiebearden.com/)**
>
> Jessie Maxwell Bearden is a multidisciplinary artist and creative director living in Los Angeles and working with clients worldwide.

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

Any help/advice would be appreciated!

---

<div class="post-metadata">

**Author:** ![StayLegitLoneWolf](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/staylegitlonewolf/32/106856_2.png) [@StayLegitLoneWolf](https://forum.wixstudio.com/u/StayLegitLoneWolf)\
**Post date:** [March 27, 2025, 2:35pm UTC](https://forum.wixstudio.com/t/wix-classic-pinned-item-interacting-with-other-elements-heirarchy/69924/2 "2025-03-27T14:35:00Z")

</div>

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.

 ![This image shows a screenshot of a layer panel in a graphic design application with various layers named, some of which are open and visible on the design canvas. (Captioned by AI)](https://us1.discourse-cdn.com/wix/original/3X/e/a/ea6b53ed03057aa354a9470e0ef7bf69e63fd022.jpeg)

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

---

<div class="post-metadata">

**Author:** ![Pratham](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/pratham/32/119586_2.png) [@Pratham](https://forum.wixstudio.com/u/Pratham)\
**Post date:** [March 27, 2025, 3:13pm UTC](https://forum.wixstudio.com/t/wix-classic-pinned-item-interacting-with-other-elements-heirarchy/69924/3 "2025-03-27T15:13:37Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![StayLegitLoneWolf](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/staylegitlonewolf/32/106856_2.png) [@StayLegitLoneWolf](https://forum.wixstudio.com/u/StayLegitLoneWolf)\
**Post date:** [March 27, 2025, 3:59pm UTC](https://forum.wixstudio.com/t/wix-classic-pinned-item-interacting-with-other-elements-heirarchy/69924/4 "2025-03-27T15:59:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![user5434](https://avatars.discourse-cdn.com/v4/letter/u/a9adbd/32.png) [@user5434](https://forum.wixstudio.com/u/user5434)\
**Post date:** [March 28, 2025, 2:47am UTC](https://forum.wixstudio.com/t/wix-classic-pinned-item-interacting-with-other-elements-heirarchy/69924/5 "2025-03-28T02:47:54Z")

</div>

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…

 ![Screen Shot 2025-03-27 at 8.47.03 PM](https://us1.discourse-cdn.com/wix/original/3X/2/4/2412a3dfa22c7f0388e5d0e0e8b6bfc7a9dd791a.png)

---

<div class="post-metadata">

**Author:** ![user5434](https://avatars.discourse-cdn.com/v4/letter/u/a9adbd/32.png) [@user5434](https://forum.wixstudio.com/u/user5434)\
**Post date:** [March 28, 2025, 2:49am UTC](https://forum.wixstudio.com/t/wix-classic-pinned-item-interacting-with-other-elements-heirarchy/69924/6 "2025-03-28T02:49:02Z")

</div>

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.

 ![Screen Shot 2025-03-27 at 8.47.03 PM](https://us1.discourse-cdn.com/wix/original/3X/2/4/2412a3dfa22c7f0388e5d0e0e8b6bfc7a9dd791a.png)

---

<div class="post-metadata">

**Author:** ![StayLegitLoneWolf](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/staylegitlonewolf/32/106856_2.png) [@StayLegitLoneWolf](https://forum.wixstudio.com/u/StayLegitLoneWolf)\
**Post date:** [March 28, 2025, 4:26am UTC](https://forum.wixstudio.com/t/wix-classic-pinned-item-interacting-with-other-elements-heirarchy/69924/7 "2025-03-28T04:26:23Z")

</div>

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 .

 ![The image shows a webpage with the text "JESSIE MAXWELL BEARDEN" displayed on an overlay, along with a pinning options sidebar plotting its position onscreen. (Captioned by AI)](https://us1.discourse-cdn.com/wix/original/3X/4/1/411817d97fd83a3c26ba25cf35d9dd17b2bdcfb4.jpeg)

 ![The image shows a visual code editor with an open project and a menu open over an image, containing options such as "Edit Text," "Generate Text with AI," and "Animation & Effects." (Captioned by AI)](https://us1.discourse-cdn.com/wix/original/3X/7/3/73cfcfd2db96e0109a539699706dcdb757365a20.jpeg)

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 !

---

<div class="post-metadata">

**Author:** ![StayLegitLoneWolf](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/staylegitlonewolf/32/106856_2.png) [@StayLegitLoneWolf](https://forum.wixstudio.com/u/StayLegitLoneWolf)\
**Post date:** [March 28, 2025, 12:49pm UTC](https://forum.wixstudio.com/t/wix-classic-pinned-item-interacting-with-other-elements-heirarchy/69924/8 "2025-03-28T12:49:33Z")

</div>

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](https://staylegit.wixstudio.com/jessiebearden)]**

 ![The image shows a web interface allowing users to edit and configure text, with highlighted options for selecting position type and alignment settings. (Captioned by AI)](https://us1.discourse-cdn.com/wix/original/3X/7/3/73277062fcf8445d4c7cdb86aa73b23d108f09c4.png)

**"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.

 ![This is a screenshot of a text block in a design tool with the name "JESSIE MAXWELL BEARDEN" displayed at the top, and options and settings for adjusting size and layout on the right side. (Captioned by AI)](https://us1.discourse-cdn.com/wix/original/3X/3/8/38a04b3be424ff45db1167dbd67987ef3bcef759.png)

 ![The collage showcases various artistic expressions, including makeup, floral arrangements, vintage swimwear, and a serene lavender field. (Captioned by AI)](https://us1.discourse-cdn.com/wix/original/3X/0/a/0a5db36d6a7b123f4a3904bf08a9d7068accc66b.jpeg)

 ![The image displays a collection of creative formations involving geometric patterns, colored lenses, digital illustrations, and fashion design. (Captioned by AI)](https://us1.discourse-cdn.com/wix/original/3X/a/1/a12530e8dfb3f64c477f2d1d45291fdab1b60594.jpeg)

**Also include is one with video**

 ![The image shows a person in formal attire posing against a wooden background with the name "JESSIEMAXWELLBEARDEN" displayed prominently, alongside a website banner for "WIXSTUDIO." Below the name, two smaller thumbnails are visible, one with a blurred sky and another featuring colorful mechanical parts. (Captioned by AI)](https://us1.discourse-cdn.com/wix/original/3X/0/5/05367ba95d15f655e47c670da72cc454f394e6c0.jpeg)

---

<div class="post-metadata">

**Author:** ![user5434](https://avatars.discourse-cdn.com/v4/letter/u/a9adbd/32.png) [@user5434](https://forum.wixstudio.com/u/user5434)\
**Post date:** [March 29, 2025, 9:16pm UTC](https://forum.wixstudio.com/t/wix-classic-pinned-item-interacting-with-other-elements-heirarchy/69924/9 "2025-03-29T21:16:34Z")

</div>

@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!!!

---

<div class="post-metadata">

**Author:** ![StayLegitLoneWolf](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/staylegitlonewolf/32/106856_2.png) [@StayLegitLoneWolf](https://forum.wixstudio.com/u/StayLegitLoneWolf)\
**Post date:** [March 30, 2025, 4:47pm UTC](https://forum.wixstudio.com/t/wix-classic-pinned-item-interacting-with-other-elements-heirarchy/69924/10 "2025-03-30T16:47:31Z")

</div>

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](https://staylegit.wixsite.com/my-site-14?rc=test-site)**

**For this example, I created six sections:**

 ![The image shows a web page editor with a layers panel opened, revealing sections like "mainText" and "section0" in the header section, and file paths in code lines below. (Captioned by AI)](https://us1.discourse-cdn.com/wix/original/3X/9/f/9f2e6a03992fb4128bdd3279ac7a8b1d4a208cc2.jpeg)

 ![The image shows a web editing interface with a highlighted text area labeled "JESSIE MAXWELL BEARDEN" and accompanying code that handles mouse interactions with the text. (Captioned by AI)](https://us1.discourse-cdn.com/wix/original/3X/3/8/388bab6f26efa8c69b00baf9af7c5dfd29c62ea2.png)

- **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.

 ![The image shows a woman with long dark hair, wearing a beige blouse, and labeled "JESSIE MAXWELL BEARDEN," with code and interface elements visible around her, including comments about her visibility status. (Captioned by AI)](https://us1.discourse-cdn.com/wix/original/3X/c/d/cd9a616b23e0abfe0ac8e3db6d958b3e329450d5.jpeg)

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

 ![The image shows a coding interface with a video player element where a video titled "Victoria Maxwell Bearden" is paused. (Captioned by AI)](https://us1.discourse-cdn.com/wix/original/3X/f/d/fd4290b3b5e4b85ad70385f440d7b52ec05168fd.jpeg)

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**

```javascript
$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
        });
    });
});

```
