DEV Community

Cover image for Sticky navbar from scratch using react

Sticky navbar from scratch using react

Rohit Dalal on June 21, 2020

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 ...
Collapse
 
madhavbahlmd profile image
MADHAV BAHL

Hi @rohit ,
Is there any codepen sample? Or somewhere you have hosted this code? Or GitHub repo?

Collapse
 
dalalrohit profile image
Rohit Dalal

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!

Collapse
 
sum1275 profile image
sum1275

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.

Thread Thread
 
dalalrohit profile image
Rohit Dalal

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,

Thread Thread
 
sum1275 profile image
sum1275

Hello buddy i attached an image that explain better.

Animated sticky header on scroll in React---this should be problem statement.

Thread Thread
 
dalalrohit profile image
Rohit Dalal

I don't see any image attached

Thread Thread
 
sum1275 profile image
sum1275

here see

Thread Thread
 
sum1275 profile image
sum1275

did you get ??

Collapse
 
arabsight profile image
Rabah Ghodbane • Edited

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.

Collapse
 
federerkristijan profile image
Kristijan Federer

thank you @rohit! worked amazing, need to adjust some overflow, but otherwise works like a charm!

Collapse
 
jer_developing profile image
Jeremy

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).

Collapse
 
dalalrohit profile image
Rohit Dalal

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 :)

Collapse
 
utsavdh profile image
Utsav Dhungana

hey jeremy, can you provide the link to this code?

Collapse
 
kumar2106 profile image
Kumar2106

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.

Collapse
 
karem1986 profile image
Karem

Why do we need to use join() method? please explain:)

Collapse
 
dalalrohit profile image
Rohit Dalal

Hey Karem,

According to my approach, navbarClasses is an array of 2 strings. So, to make a single string from those, join() will make it happen.

console.log( ['navbar','scrolled'].join(" ") )  // "navbar scrolled"
Enter fullscreen mode Exit fullscreen mode

Another approach is to use Ternary operator like this:

className={scrolled ? 'navbar scrolled' : 'navbar'}
Enter fullscreen mode Exit fullscreen mode

I hope I've cleared it out ;)

Collapse
 
karem1986 profile image
Karem

Thanks Rohit! Great explanation :)

Collapse
 
battleofplassey profile image
Palash Shrivastava

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.

Collapse
 
dalalrohit profile image
Rohit Dalal

Glad you found it helpful :)

Good day ;)

Collapse
 
b33hazard profile image
MUHAMMAD ALI

Hello Rohit, this is awesome. but i'll go with ternary.