Is there any way to make this type of Scrolling indicator?

Hi there! Is there any way to make this type of Scrolling indicator in webflow?


Which option should I choose to create this functionality. Can Anyone please help?

Hi @yusuf, yes this is possible. You can anchor the sidebar links to the section titles and style the Current state. Ideally you might need a little custom CSS or script. This is because the Current state will only affect the direct element.

Thank You so much. Can you please help me with just one demonstration? It would be so much helpful. I will do the rest by following it. Thanks in Advance :heart:

I’ve tried using the default Current method but I think it’s not as nice. So instead you can follow this:

  1. Make sure all your content section has unique IDs. For example: section-1, section-2 and etc.
  2. All your sidebar menu are Link Blocks/Link Text and link them to the corresponding sections.
  3. Copy this code to the page code
<script>
  var wHeight = $(window).height();
  var offset = wHeight * 0.66;/* Adjust this as needed from 0.0 to 1 */
  var elem = document.getElementsByClassName('rich-text-block'); /* CHANGE --- the section class */
  var link = $('.anchor-link'); /* CHANGE --- the sidebar link block class */

  $(window).on('load scroll', function(){
 
    for( let i = 0; i < elem.length; i++){
      var r = elem[i].getBoundingClientRect().top;
      if(r > 0 && r < offset){
      	console.log(i);
        link.eq(i).addClass('active');
        link.eq(i).children().addClass('active');
        link.not(link.eq(i)).removeClass('active');
        link.not(link.eq(i)).children().removeClass('active');
        break;
      }
    }
  });
</script>
  1. Change the class in the code formatted with all lower case and separated by ’ - '.
  2. All your sidebar menu items need to have combo class Active, which is styled.

Feel free to refer here: https://preview.webflow.com/preview/share-d7a35d?utm_medium=preview_link&utm_source=designer&utm_content=share-d7a35d&preview=6069e7a62a351e2370f2f374020b5049&pageId=60555df31a82e7efa20a714d&mode=preview

Thank You so much…But it seems a bit complicated to me…Can you just make a clone with some normal SVG or images…and share pls. Thanks a lot for sharing the code. :heart:

@yusuf You still need to do some work based on the instructions above but you can clone the project here: https://webflow.com/website/Forum-Requests?s=share-d7a35d

1 Like