Create scrolling navigation

Ask the community
1

Hi.

I am really struggling making a scrolling navigation effect, where a user would see a section in full screen, and then scroll down to transition to the next section.

For reference the tesla.com site has this effect.

How do I create this?
I have tried working with anchors and viewport enter/leave, but it’s just not viable on different viewports in my experience.

2

Hi Sebastian, have you tried to set the height of each section or item to 100vh? It will be the height of 1 screen no matter on which device you are.

Put a small element in the middle (center) of each section, when it enters the viewport you could make the right buttons appear by changing the label and text. (using viewport enter)

If you are familiar repeaters and connecting them to a database, each screen could be one item in a repeater. That would save some work as you only have to a add the elements and code once.

If you also want to make the buttons fade in and out like on the website you mentioned, I would use an array of promises, which gives you more control over when to fade in and out. This would be a bit more complex, and it might be easier to leave the fading effects.

3

Hey Sebastian!

This can be achieved with some simple Corvid:

$w.onReady(function () {
    $w('#sectionOne').onViewportEnter(() => {
        $w('#box1').scrollTo();
    })
    $w('#sectionTwo').onViewportEnter(() => {
        $w('#box2').scrollTo();
    })
    $w('#sectionThree').onViewportEnter(() => {
        $w('#box3').scrollTo();
    })
    $w('#sectionFour').onViewportEnter(() => {
        $w('#box4').scrollTo();
    })
});

Set all sections to 100vh, add a 1px container to each section that acts as an anchor(appears as #box in the code snippet). Dock them to the top with 51px margin (because of the 50px "Created on EditorX banner - unless you’re premium).

My example (I left the anchors visible for you to see): https://jonathant99.editorx.io/mysite-18

4

This is great… Works almost every time :stuck_out_tongue:
Some times when I publish, the live site goes nuts and just keeps scrolling, but then I re-publish and it’s all good.

Edit… Just as I was done writing this and went back and published, the site is back to autoscrolling… No matter what I seem to try, I cannot fix it.
I have tried adjusting the margins on the boxes, but no luck.

Edit…
I also see that your example does the same thing :frowning:

Edit 3: I might have found a solution. If I edit the page itself and give it a 50px padding to the top, the problem seems to go away.
Don’t know if it’s because of the editor x panel doing this.

Edit 4: Nope… now it’s not working again…
I have done nothing to the page, section size or boxes. But they just randomly stop functioning as they should…
I might suspect it’s a bug at this point.

But I have another issue.
I want to be able to have a header button that sends the user to the top of the page (or reloads the frontpage), but when I link to the same page, it tries to scroll up, but gets interrupted and scrolls down again, when hitting the first section on the way up.

5

Yeah… I have the vh set to 100.
The issue with setting the box in the middle of the section, is that the user has to scroll further down.

The effect I am trying to achieve is like flipping through a book where the user only has to scroll one time to change the page (section).

I haven’t tried the repeater option, but I would think that I would be limited in my design options when doing that

6

@sebastian308 Did you ever figure this out? I am looking to achieve the same thing…

7

Is this no longer possible? Tried same approach. Not working anymore, but it used to work 6 months ago…