How to limit an element scrolling range?

Ask the community
,
1

I’d like to set a picture follow the screen(pin to screen) when scrolling, and limit the minY&maxY. How could I do it by velo code?

I tryed the code below but it didn’t work.

$w.onReady(function () {

const $image = $w("#floatingImage"); 
const minY = 100; 
const maxY = 500; 

$w.onViewportScroll(() => {
    
    const scrollY = $w("#page").scrollY;

    let newY = scrollY + 50; 
    if (newY < minY) newY = minY; 
    if (newY > maxY) newY = maxY; 

    $image.style.top = `${newY}px`;
});

});

2

dont think style.top will work in Wix

maybe something like this

$w.onReady(function () {
    const $image = $w("#floatingImage"); 
    const minY = 100; 
    const maxY = 500; 


    $w.onViewportScroll(() => {
        const scrollY = $w("#page").scrollY;

        let newY = scrollY + 50; 

        if (newY < minY) {
            newY = minY;
        } else if (newY > maxY) {
            newY = maxY;
        }

        $image.scrollTo({
            left: 0, 
            top: newY, 
            behavior: "smooth" 
        });
    });
});
3

@Dan_Suhr thank you for your reply.

I’d just found the way to solve my problem and no need velo code
https://wix.wixanswers.com/apps/widget/v1/wix/53f85d67-f8b0-41ca-9dc8-5a16390cc74f/view/en/article/178f30bb-f82e-44d1-875f-c4bf5cac7bc5

1 Like