Scroll indicator links not working

Design help Animations & Interactions
1

Hi, I’m having a problem figuring out how to fix a link problem due to custom code. Here is some background:

I’m building this site that has a scroll indicator on the right. I made some section triggers so the colors animate when they reach the next section. Works great. Also, each number links to the corresponding section and takes you directly there. Awesome, works great.

I wanted my sections to snap when scrolled (scroll snapping) so I found someone with a good solution
(The Best Method of Scroll Snapping! Easy Webflow Interactions - YouTube)

works great except now my links on the right don’t work. They still change colors on each section but they wont link. I’m guessing because the scroll snapping requires a div wrapper to contain the sections but I figured if the links were anchored to those sections they would work no problem. Not the case. When I remove the sections from the scroll-snap-wrapper, all is well. The links work.

Is there a way to have it all or do I have to choose one over the other?

Here is my site Read-Only:
https://preview.webflow.com/preview/test-menu-bar?utm_medium=preview_link&utm_source=designer&utm_content=test-menu-bar&preview=5e255716d8d3abe6c62996be405de116&mode=preview

2

hi @ryang2723 here is a DEMO how to do that with intersection Observer. There is only basic animation to snap (that can be (hopefully) improved with more JS code) but as you can see there is posibility to make scroll & snap while still keeping side navigation functionality. Hope that will help.

You can see result on LIVE link

3

Thanks. Stan. Unfortunately, I’m not versed in code so I don’t know how to implement this method and customize it for my site. Thanks for the reply though!

4

Hi @ryang2723 sorry that I didn’t replicate your site, I have provided solution and all code you need is there. Copy JS code and keep it somewhere safe so one day you may be able to use it.

5

Thank you greatly appreciated. I’m sure I’ll have to learn a little code if I want to make the sites I want

1 Like
6

hi @ryang2723 here is what you have to do

  1. cleanup unused CSS classes

CleanShot 2020-12-15 at 07.31.53
CleanShot 2020-12-15 at 07.31.531170×737 97.4 KB

  1. add class section to each section - (you have 3)

CleanShot 2020-12-15 at 07.31.25
CleanShot 2020-12-15 at 07.31.251172×394 43.8 KB

  1. add code below into embed HTML or into page to before section
<script>
document.addEventListener("DOMContentLoaded", () => {
const sections = document.querySelectorAll(".section");

let options = {
  rootMargin: "0px",
  threshold: 0.25,
};

const io = new IntersectionObserver((entries) => {
  for (const entry of entries) {
    
    if (entry.isIntersecting) {
    let targetSection = entry.target;
      const top = targetSection.getBoundingClientRect().top;
      //           console.log(top)
      window.scrollBy({ top: top, behavior: "smooth" });
    }
  }
}, options);

sections.forEach((elem) => io.observe(elem));
})
</script>

This should work on your page

7

Awesome thanks Stan. I know I need to clean up a lot of my naming and whatnot. This is just testing and learning before I build the actual site. I’ll for sure give this a try. Thanks again, it’s been really hard to find answers so I really appreciate the help.

1 Like
8

One more thing I forget but maybe you noticed it in example already, set height of scroll-snap-wrapper to auto instead 100VH otherwise your sidebar nav would not work. If this will work for you feel free to check apropriate answer as solution to be this request marked as solved

9

hi @ryang2723 if your got answer to your question please feel free to check any response as solution to be this request marked as solved