In many modern websites, you must have seen this effect of Navigation bar/ Header sticking to the top of the page even if you scroll down the page ...
For further actions, you may consider blocking this person and/or reporting abuse
Hi @rohit ,
Is there any codepen sample? Or somewhere you have hosted this code? Or GitHub repo?
Yes, @madhavbahlmd , I've given the GitHub link for the same at the end of the post.
Here is the link again: GitHub Repo
Sorry for the late reply!
suppose along with navbar there is header to means navbar is the subset of header in header there is company logo and in navbar other components are there
like home,service etc.
now i want to keep only my navbar component static and header component not.
Then what to do .
please help me with some article or any code suggestion.
Hey sorry for the late reply,
Can you elaborate more clearly on the problem, please?
I'm quite not clear on the asked question.
Thank you,
Hello buddy i attached an image that explain better.
Animated sticky header on scroll in React---this should be problem statement.
I don't see any image attached
here see
did you get ??
you should remove the event listener in the clean up function of useEffect to avoid memory leaks.
And provide an empty dependency array to useEffect to only register the event once when the component mounts.
thank you @rohit! worked amazing, need to adjust some overflow, but otherwise works like a charm!
Hi Rohit,
Thanks so much for this - I found it really helpful!
One slight change I made to my own code it I removed the navbarClasses (and the if block to push 'scrolled' onto the className and instead, in the function return, included the following: className={setScrolled? 'navbar scrolled' : 'navbar'} which seems like less overhead and transitions smoother (especially noticeable when you set the transition and conditional if block to check offset are both set to 0).
Thank you, Jeremy! Glad to hear you found it useful ;)
Yes, your approach to choosing appropriate className upon scroll is too perfect. No problem with it.
I just chose it for simplicity. Nothing else.
Happy coding :)
hey jeremy, can you provide the link to this code?
That was really a nice example to explain, can you please make another post on how we can align other component beneath the nav bar. Actually right now i am trying to code one react project in which i have to put my resume pdf beneath my navbar, but that is not happening.
Why do we need to use join() method? please explain:)
Hey Karem,
According to my approach,
navbarClassesis an array of 2 strings. So, to make a single string from those, join() will make it happen.Another approach is to use Ternary operator like this:
I hope I've cleared it out ;)
Thanks Rohit! Great explanation :)
Thanks Rohit. This helped a lot, I was stuck on a project (migrating HTML to NEXT.js) trying to run jquery to implement sticky header.
Glad you found it helpful :)
Good day ;)
Hello Rohit, this is awesome. but i'll go with ternary.