Hello, I’ve been trying to find a solution for many hours. I want a button to appear only while scrolling. If the visitor wants to read the information on the page, the button should be different so that it does not interfere.
The button leads back to the top of the page. The functions I have already tested export function _viewportEnter and _viewportLeave on a tutorial page. But do not bring the solution. OnMouseIn is not enough either.
I am very happy about your support.
Under this link you can see my attempts and the different code. https://web7696.wixsite.com/try-and-error/scroll2
What function does Scroll recognize?
Thanks a lot, Harry!
Example page
https://web7696.wixsite.com/try-and-error/scroll2
I succeeded in these attempts, but unfortunately it does not solve my wish.
//Stern ist im Bild - Text "Stern ist hier" wird angezeigt
export function stern_viewportEnter_1(event) {
$w("#textweg").hide("fade");
$w("#texthier").show("fade");
}
//Stern ist nicht im Bild - Text "Stern ist weg" wird angezeigt
export function stern_viewportLeave_1(event) {
$w("#textweg").show("fade");
$w("#texthier").hide("fade");
}
//nach Oben Button erscheint bei mouseIn auf Orange Box
export function box1_mouseIn(event) {
$w("#nachOben").show("fade");
}
//nach Oben Button versteckt bei mouseOut von Orange Box
export function box1_mouseOut(event) {
$w("#nachOben").hide("fade");
}
Unfortunately I have not found a solution for scrolling.
//Button1 soll beim Scrollen angezeigt werden
export function page1_ ? ? ? ? ? (event) {
$w("#button1").show("fade");
}
//Button1 soll beim "nicht" Scrollen versteckt werden
export function page1_ ? ? ? ? (event) {
$w("#button1").show("fade");
}
To find more info about using scroll in Wix Code, simply look in the Wix API Reference and use the search bar with ‘Scroll’ and you should have a good many examples to look through.
Although you won’t find a scroll function so to speak, you will find a scrollTo or scrollBy instead.
Your best option would be to simply add a transparent element with a onViewportLeave event handler on it and then add another transparent element with a onViewportEnter event handler function on it.
So that way when the user scrolls down the page the onViewportLeave event function in the top transparent element kicks in and the button element is hidden, then when the user gets further down the page the onViewportEnter event function on the lower transparent element kicks in and the button element is set to be shown again.
If you are simply wanting a button at the bottom of your website’s page, then you can either add it to your footer itself, or simply add it to the page itself just above the footer.
Then add an anchor near to the top of your page and simply use the Wix Editor link settings itself to link the button to the anchor.
https://support.wix.com/en/article/linking-an-element-to-an-anchor
Otherwise, you can add it to the bottom of your page and simply have a transparent element at the bottom of your screen too that you can use the onviewportEnter event handler function on it, so that when the code kicks in the button is shown.
See the API reference for onViewport and using event handlers.
https://www.wix.com/corvid/reference/$w.ViewportMixin.html
https://support.wix.com/en/article/corvid-reacting-to-user-actions-using-events
https://support.wix.com/en/article/corvid-tutorial-adding-custom-interactivity-with-events
//rest of code above...//
export function transparentElement_onViewportLeave(event) {
$w("#buttonelement").hide();
}
export function transparentElement_onViewportEnter(event) {
$w("#buttonelement").show();
}
//rest of code below...//
Hello GOS, thank you for your quick and detailed support. I followed your advice and now solved it with onViewportLeave / Enter. Thank you very much!