implementing a sticky scrolling behavior for an embedded HTML element in Wix, such that it moves between two sections and remains fixed at a specific point

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!