How to acive a scrolling progress bar indicator?

Discussion Ask a question
, ,
1

Does anyone know how to achieve a progress bar associated with scrolling down a page?

A great example is this Wix site: https://www.studio1design.co/
See the blue progress bar directly under the header as you scroll down the page.

Two main questions:

  1. What event would you use to trigger the function of expanding/contracting the line?

  2. What property do you use to set the line’s width?

Thank you!

My website, created using Editor X: neff.design

2

The example site that you linke to is not a Wix site.

3

Well…that explains part of my conundrum.

(They are a Wix Partner, so I think I assumed…)

@alicihan am I correct in assuming this can’t be achieved in Wix/Corvid? I haven’t found an event in Wix that can capture the page/mouse scroll.

4

I also am wondering how to achieve this. There are ways to do this with CSS in Webflow, but I am not sure the best way to tackle this with Corvid.

5

@neffdesign

Perhaps this?

https://www.wix.com/corvid/reference/wix-window/scrollby

6

Hello, is there any news about that code? I am looking for the same code.

7

News about what code? What is it you are trying to accomplish?

This post is old and is being closed.

Please add your own issue into a new post instead of bumping up an old post.
Also, add any code in a code block as stated in the Forum Guidelines.

8

@yisrael-wix Ok, thank you for the information. I will open a new post.

9

I’ve concluded this isn’t’ possible in Wix.
The scrollBy() function programmatically scrolls the page. To achieve this I would need to know where the page is currently at in relation to the length of the page. I’m unaware of a function in Wix that provides the current scroll location of a page.

10

@neffdesign
STRANGE!
Then how does this one works?
https://russian-dima.wixsite.com/meinewebsite/blank-21

You scroll down, and the video knows exacly when to start.
You scroll up and the video again knows exacly when to stop and when to start!

No anchors were used here in this example.

When you use …
https://www.wix.com/corvid/reference/wix-window/getboundingrect
&
https://www.wix.com/corvid/reference/wix-window/scrollby
&
using scroll.to

you should be able to achieve your aim.

11

@neffdesign In addition to Russian-Dima
I used this code for scrolling position indicator → 

$w('#footer1').scrollTo()    // scrolls to the footer 
  .then(() => {
  wixWindow.getBoundingRect()
  .then( (windowSizeInfo) => {
 let scrollX = windowSizeInfo.scroll.x;                
 let scrollY = windowSizeInfo.scroll.y;    
 
    $w('#progressBar1').targetValue =  scrollY;   //progress bar
    console.log("This is maximum" + scrollY);
 
  } );
  $w('#header1').scrollTo();  // scrolls back to header
  } );

setInterval(() => wixWindow.getBoundingRect()
        .then( (windowSizeInfo) => {
 let scrollX = windowSizeInfo.scroll.x;                
 let scrollY = windowSizeInfo.scroll.y; 
           $w('#progressBar1').value = scrollY;               

     
         } ) , 1000);
2 Likes
12

@ajithkrr & @russian-dima , Thank you! This might be just the answer I need. I wasn’t aware of this function. I’ll give it a try.

1 Like