Create section navigation with React and Intersection Observer
Introduction
For one of the last project at work, I had to c...
For further actions, you may consider blocking this person and/or reporting abuse
Hi Maceik, came across this article and i must say it is really helpful but i am trying to create something like this website olaolu.dev/ where those boxes by the sides are the navigators but i keep getting error, do you by any means have a solution to something like that, i'd be really grateful, tried using static data and i am still getting the errors
Hey, I'd need more details, a repo or a code sandbox, it's really hard to help without more information :)
github.com/thatFemicode/Landing
Here is a link to the repo, i am trying to recreate what you did with the intersection observer api but for navigation like the link i sent to you where each section that comes in makes the circles background turn black
I am not sure i am explaining well, instead of looping over several characters, the sections will have their own ref, i keep getting errors, been on it since yesterday night, if you notice from the link i sent earlier olaolu.dev/, there are boxes that keeps track of the section. do you get me now?, i'd be really grateful if you can assist me in making this work, thanks a lot
I think i have a better explanation now, yes
so with refernce to that website i sent olaolu.dev/ what i want to achieve with your approach using the IO API is to have a navigator (the boxes or circles) that can be clicked on and goes directly to a section either be it home or gallery and once a particular section is in view, the circle or box now has a style it gives like as shown in the website i sent. Just like yours using static data where you click on the names which serves as navigator and the particular character comes into the viewport then both the navigator and character get the yellow background, I keep getting errors since i am not looping over. i have done somethings on the github repo i sent. I'd be really greatful if you can assist me.
I'd make a repo and share now
I found bag. When you click navigation button and stop scroll by touching screen, button, that has been clicked, has active class until another button is clicked.
I created own section-navigation. The same idea, but other decisions.
Hi Maciek, thanks for the write-up! It helped me a lot in getting started with IO + hooks. In my own implementation I found a way to make the rootMargin configuration simpler than using a 1px pixel window height listener. While achieving the same thing.
Hope this helps someone else stumbling upon this post.
Oh wow, that's way better than my approach :) Awesome stuff, thanks :) BTW - great designs mate :)
Unnecessarily complicated, mixing graphql and a lot of non related stuff on an article about Intersection Observer + React. I'm sorry for the newbie people on web development who are reading this and have no idea on what is graphql and gql etc.
Well, that's your opinion :)
I can explain it to you if you need.
I believe this gives beginners the opportunity to upgrade themselves so thanks for that!
HI Maciek ! I get so confuesd to implement on my project because of gql things. do you have same kind of more simplified examples ?
Hey yeah I can create something. I'll post a link later today OK?
Okay. thanks.
Hey, sorry for the delay, I had a busy weekend :) Here's an example without the GraphQL -> github.com/maciekgrzybek/react-sec...
It's using static data in
data.jsonfile. Hope that helps :) Let me know if you need anything else.A big thank you! I really appreciate this.
Hi Akmal, thanks for the comment. Good spot, I totally forgot about it :) I've already updated example code and the demo. Not sure what do you mean about that Codesandbox example though. Looks like the code it's spot on. Could you explain? Thanks :)
Thanks! Helped a lot!!
Glad it did :)
Apt!