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 )
Hello, thanks for your reply. Well overall yes this is what I want. However, this is not an issue I’m facing, since the published test page doesn’t have perfectly aligned pictures I can deal with that.
My problem is that I can’t find a way around eliminating the pinned screen when i scroll to top because his part of the code is applied again:
export function text9_viewportLeave(event) {
$w('#image117').hide();
$w('#screen1').show();}
I am attaching some screenshots with notes:
The part where the pinned image ‘screen1’ is shown instead ‘image117’:
The pinned image is gonna be hidden again after ‘columnStrip4’ is out of sight:
Scrolling up:
When scrolling up and leaving ‘text9’ out of sight again (this time the text is going down), we can see the pinned image again:
