Hello, I am very fresh to coding and am trying to find a solution to a very simple problem.
I have a pinned image (hidden on load) on a page, and I want to show/hide it when certain components (text element or strip) are shown on the screen for the existing 'image117' be changed by the pinned image 'screen1'. For the first part my simple code that I managed to write works, however I am facing the problem when scrolling up and I dont want to see the pinned image on the 'columnStrip10 ' which is above 'text9' element's strip (columnStrip5').
I was thinking that if/else statements would be a solution but couldn't figure out how to add it to my existing code for the logic to work.
The code looks like this:
export function text9_viewportLeave(event) {
//the code is applied again when scrolling up, because the text is now leaving down, we see the pinned image on the upper strip
$w('#image117').hide();
$w('#screen1').show();}
export function text9_viewportEnter(event) {
$w('#image117').show();
$w('#screen1').hide();}
export function columnStrip4_viewportLeave(event) {
$w('#screen1').hide();
$w('#image117').show();}
This is the link to the page draft where this code is applied https://www.ooniq.lt/test2
#pinned_image #show #hide #pinned
As far as I understand, you want a first image of a phone to be replaced by another one as soon as their positions match.
In order to achieve this you'll need to use a WindowSizeInfo to get a current scroll position (https://www.wix.com/corvid/reference/wix-window.html#WindowSizeInfo) instead of a viewport of a strip.
You can get an exact position of an element in pixels by using the Editor toolbar (https://support.wix.com/en/article/positioning-elements-using-the-editor-toolbar)