Element fade on scroll

Ask the community
,
1

Hi all, and thanks in advance. I’d like my container (containing a vertical menu and an iFrame) to disappear when scrolling a page but to reappear when the scrolling has stopped.

Screenshot 2023-11-13 at 9.15.20 AM
Screenshot 2023-11-13 at 9.15.20 AM1920×917 121 KB

2

You can use the following triggers…

-onViewpointEnter
-onViewpointLeave

You will surely find more infos when you search for it in the forum-search.

1 Like
3

Thanks so much. Does it matter that the container is pinned to page?

Can you help me with the specific code?

4

There are diffrent possibilities to solve your problem.

  1. using → getBoundingRect
  2. using anchors
  3. using any other element on your page (which will move on scrolling) to get it’s position, or use as already told the vieport.

When scrolling your page, elements enter and leave the vieport, depending on their position on scren. If an ellement gets visible on screen → it has entered the viewport, if it gets out of view → it has leaved the viewport.

But you can also work with getBoundingRect…

See if you can use this one…

wixWindow.getBoundingRect()
  .then( (windowSizeInfo) => {
 let windowHeight = windowSizeInfo.window.height;      // 565
 let windowWidth = windowSizeInfo.window.width;        // 1269
 let documentHeight = windowSizeInfo.document.height;  // 780
 let documentWidth = windowSizeInfo.document.width;    // 1269
 let scrollX = windowSizeInfo.scroll.x;                // 0
 let scrollY = windowSizeInfo.scroll.y;                // 120
  } );

you will have to adjust it a little bit.

1 Like