Create an embedded HTML element in Wix that remains sticky between two specific sections and adapts dynamically when scrolling between them

Ask the community
, , ,
1

How can I make an embedded HTML element behave as sticky between two specific sections in Wix?

Wix Studio Editor and Velo by Wix

I want an embedded HTML element to behave in the following way:

  1. It should remain sticky between Section 1 and Section 2.
  2. When scrolling to Section 2, the element should stick to a specific position (Point B).
  3. As I scroll further to Section 3, it should remain at the same position in Section 2.
  4. When scrolling back from Section 2 to Section 1, the element should move back to its original position (Point A).

In short, the HTML element should only act sticky between Section 1 and Section 2, and move as described when scrolling up or down.

I’ve tried several methods to achieve this, including:

  • Creating anchor points and manipulating the element using Velo by Wix.
  • Making the element sticky directly through Wix Studio.
  • Adjusting its position programmatically using the wix-window API.

However, none of these methods have worked to produce the desired behavior.

Additional information:
The element in question is an embedded HTML element. The scrolling behavior needs to be responsive and consistent across all devices. If anyone has a solution or best practices for achieving this, I’d appreciate your guidance!

3

Hello, Code_Wizard. Thank you for your response.
I was trying this method (the code below), but I am always having issues.
I tried sending the element position directly with postMessage, but I keep encountering problems.
Do you think I need to change the method, maybe by using Intersection Observer in Wix?
What do you think? Thank you!

import wixWindowFrontend from 'wix-window-frontend';

$w.onReady(function () {
    trackScroll();
});

function trackScroll() {
    wixWindowFrontend.getBoundingRect()
        .then((windowSizeInfo) => {
            const scrollY = windowSizeInfo.scroll.y;
            const pointA = { top: 500, left: 100 }; 
            const pointB = { top: 800, left: 200 }; 
            const scrollRange = 300; 
            const htmlComponent = $w('#html1'); 

            let currentTop = 0;
            let currentLeft = 0;

            if (scrollY >= pointA.top && scrollY <= pointB.top) {
                const offset = (scrollY - pointA.top) / scrollRange;
                currentTop = pointA.top + (offset * (pointB.top - pointA.top));
                currentLeft = pointA.left + (offset * (pointB.left - pointA.left));

                htmlComponent.postMessage({
                    type: 'updatePosition',
                    style: {
                        top: `${currentTop}px`,
                        left: `${currentLeft}px`
                    },
                    additionalData: {
                        isVisible: true
                    }
                });
            } else if (scrollY > pointB.top) {
                currentTop = pointB.top;
                currentLeft = pointB.left;

                htmlComponent.postMessage({
                    type: 'updatePosition',
                    style: {
                        top: `${currentTop}px`,  
                        left: `${currentLeft}px`,
                    },
                    additionalData: {
                        isVisible: true
                    }
                });
            } else {
                htmlComponent.postMessage({
                    type: 'resetPosition',
                    style: {
                        top: '',
                        left: ''
                    },
                    additionalData: {
                        isVisible: false 
                    }
                });
            }

            setTimeout(trackScroll, 100);
        });
}
5

I can’t find any documentation about the IntersectionObserver in Wix and how to use it on Wix

7

The Code_Wizard,
I can’t see your comments. Could you reach out to me via LinkedIn, please?

https://www.linkedin.com/in/jawher-kassas

8

Hello! Updating the position of the html element via velo is not possible. This is potentially a good question under design as if it is possible it will only be through the native element positioning options available in studio.

If you are looking for more information on designing in the editor we do have an academy https://www.wix.com/studio/academy