developer image

WEB DESIGN & DIGITAL MARKETING

I am Joseph Thomas
Web Developer / Designer
Business Marketing Expert
Email Me

How to make sticky navigation and change logo on scroll?

How to make sticky navigation and change logo on scroll?

Let’s implement a pretty common feature on webpages, which is that the navigation bar becomes attached to the top of the page. 

You have seen this sticky navigation in many pages that you visit. 

This is called a sticky navigation.

Sticky Navigation Example using CSS

So, we make this navigation sticky basically using CSS only by adding sticky class.

position: sticky;

Here’s a demo you can play with

Sticky Navigation Example using Javascript

whenever we reach a certain position(Section 1 in our example), we will add our custom sticky class with our preferred CSS and a Better Way: The Intersection Observer API (Javascript),

Now, let’s just check out the HTML here, and just to see how this works.

HTML mockup

Hereunder we make this CSS, feel free to change it and add your own:

CSS Code
Intersection Observer API – Javascript Code

CONTACT

Contact us and we'll get back to you within 24 hours.

Montreal QC, Canada

+1 (438) 896-8613



Bangor ME, USA

+1 (904) 962-5999