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 there! Is there any way to make this type of Scrolling indicator in webflow?
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
I’ve tried using the default Current method but I think it’s not as nice. So instead you can follow this:
<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>
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.
@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