Change elements on scroll with onViewportEnter anchor – issue

Ask the community
,
1

Hey everyone!

I’m not a coder with only some basic knowledge about html…
With the help of google I was able to create an element, that on down scroll changes to another element using an anchor. When scrolling back up it changes back to the starting element.

So far so good, but unfortunately the anchor doesn’t only trigger when reaching the screen from the button (and when leaving), it also changes the element when leaving the screen at the top, makes sense? This particularly takes effect when using a laptop size screen, on a bigger monitor the anchor doesn’t reach the top part of the window…

I also tried using two different anchors to separate entry and exit but to no avail :confused: I guess I’m missing some sort of cancel snippet for both the entry and exit part… but that’s where I’m totally overwhelmed.

Here’s a test link to a skeleton draft:
https://milanfritzinger.wixsite.com/website-2?siteRevision=6

The landing page and first menu item “Our Team” has elements on the sides I’m referring to.

As an example, the code snippet of “Our Team” below.
Thanks so much for any tips in advance!!!

$w.onReady(function () {
let fadeOptions = {
  "duration":   200,
  "delay":      0
};

$w("#anchorx").onViewportEnter((event) => {
        $w('#donatebutton').show("fade", fadeOptions);
    });

$w("#anchorx").onViewportEnter((event) => {
        $w('#donatebuttonfull').hide("fade", fadeOptions);
    });

$w("#anchorx").onViewportLeave((event) => {
        $w('#donatebutton').hide("fade", fadeOptions);
    });

$w("#anchorx").onViewportLeave((event) => {
        $w('#donatebuttonfull').show("fade", fadeOptions);
    });
});
2

Am I understanding it correctly that you want the donate button to be white at the top section of the page, then become green as the user scrolls down past it?

3

Well, it’s full green at first then turning white on scroll, (works best with my link with a browser window size of like 1440x900 or else the anchor is already in the window and switched the button), and vice versa when the user scrolls back up.

Whatever state is first, my problem is, that the button correctly turns white when scrolling down but on further scroll when the anchor leaves the screen at the top, it turns back to green again, which I don’t want. I want the button to switch ONCE when scrolling down and then back to its original state again when going back up.

4

@daflexxx It sounds to me like it would be better to have the anchor towards the top of the site, so that it’s initiall on the screen when the page loads, then as it leaves ( onViewpointLeave() ) it changes color, and when the user scrolls back up again (onViewpointEnter() ) it changes back

5

@Simen Kvamme Hatlem THANKS SO MUCH! That worked… I was obviously overthinking it too much, your solution was easy! :slightly_smiling_face: