Hide the button in a specific place.

Ask the community
,
1

Hello everyone. I need to hide a button that is attached to all pages. But I need to hide it only when the button (when scrolling) passes through one of the stripes of the site.
The button is label button28.
It is necessary to hide when the button passes through columnStrip10.
how can this be achieved? Сan someone help. I tried different options from the Internet, none help (((( please

2

Instead of searching the Internet, you’ll get better results searching the Wix Corvid documentation and this forum .

It’s not clear to me what you mean by “when the button passes through columnStrip10”, but you might be able to use onViewportEnter() and onViewportLeave() to determine if the the strip is currently in the viewport.

3

I have a button that is attached to the page in the middle left. And there is a columnstrip. When scrolling the page, the button goes through the columnstrip and closes the necessary data.
I need to hide a button when scrolling a page when it falls into the columnstrip field. I am not a very experienced programmer. But I seem to understand the logic.
I need to get onViewportEnter of my columnstrip using

$ w ("#columnstrip10"). onViewportEnter ((event) => {
  let targetId = event.target.id; // "columnstrip10"
});

Then write the IF block, where using the targetId, set the hide property to the button.
Then i get onViewportLeave using

$ w ("#columnstrip10"). onViewportLeave ((event) => {
  let targetId1 = event.target.id; // "columnstrip10"
});

Write an IF block, where using targetId1 show the button again using .show.
Did I understand the logic correctly? But I really do not understand how to implement this, since I am not experienced.
And sorry for my English, I used a translator

4

If it is just a case of a button going through a strip, then can you not simply put the strip infront of the button so that it passes behind it, no need for code then.

https://support.wix.com/en/article/moving-elements-forward-and-backward

5 
This button is attached to the screen. and also has a checkmark "on all pages." the button basically does not even appear in the Layers on the Editor Toolbar
6

in the end I came up with just that. maybe someone will come in handy

let fadeOptions = {
 "duration":   1000,
};
$w("#columnStrip10").onViewportEnter( (event) => {
 let targetId = event.target.id; //
 if (targetId==="columnStrip10") {
    $w('#button28').hide("fade",fadeOptions);
  }
});
$w("#columnStrip10").onViewportLeave( (event) => {
 let targetId1 = event.target.id; // 
 if (targetId1==="columnStrip10") {
    $w('#button28').show("fade",fadeOptions);
  }
});

But still slightly wrong. since as soon as the strip appears in the field of view of the screen, the button starts to disappear. is it possible to remake it to start disappearing exactly when it passes through colimnstrip?