Kevin Powell - Community•2y ago

intersection observer - how make only one 'navbar-li-item active'

https://8kkmfj-8001.csb.app/ https://codesandbox.io/p/sandbox/black-microservice-8kkmfj?file=%2F.gitignore%3A1%2C1 How make active only 1 nav-link-item? Send codesandbox please

6 Replies

Wolle•2y ago

If you managed to add the active class to the new element, you just have to remove it from the old element in the same place.

NikitaOP•2y ago

send codesandbox Do you know how do observer with .map()?

Kevin Powell•2y ago

When you're watching something with intersection observer, once the threshold is met, the callback function will be invoked. That's for entering and leaving. It's going to assume you're simply watching each section or whatever you have setup.

const intersectionCallback = (entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // add the class to the navigation item
    } 
    if (!entry.isInersection) {
      // remove the class navigation item
    }
  });
};

const intersectionCallback = (entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // add the class to the navigation item
    } 
    if (!entry.isInersection) {
      // remove the class navigation item
    }
  });
};

I think this could be a simple if/else and work the same, but did it like this in case you need to only check if it's not intersection for whatever reason 🙂

NikitaOP•2y ago

I think problem in antoher when I scroll a little bit down it removes acitve class Problem in want when my 'Second dishes' visible for 10% (its treshold 0.1) I want remove current observing section I use dependency react-intersection-observer and I think it do it instead me Have you experience with react-intersection-observer? If yes and you want help please DM me - I think it will faster solve it in voice If we solve it I post solution here

Kevin Powell•2y ago

I don't use react, sorry I'm guessing it's very similar to the regular one though. I'd suggest posting what you tried here. I looked at the code sandbox earlier and didn't see anything render on the page. Could you post the snippet of code that isn't working or what you've tried?

NikitaOP•2y ago

Yes codesnadbox was broken - I fix it I think write I tried this1 this2 this3 not good idea I write what result of these all tries have now I come to: I should shomehow create store (with zustand) and push data 1)inView:boolean 2)index:number somehow like this inView[index] Now don't undestand how translate this values to zustand store It should work like I get this data and make 'active' class in Navbar.tsx Its a lot of context and if I write more explanations it gets it more complicated I want do smth similar to https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current when you scroll navbar chenge 'active' class

Gaming

Programming

intersection observer - how make only one 'navbar-li-item active'