Day24 of #100DaysOfCode

#CodeTogether Day 24/100

Hii folks 🙌

Today I have completed the 24th video of JavaScript30!

Project 24: Sticky Nav

Source: https://javascript30.com

Learnings:

Today we are creating a navbar that is placed statically below a header image. Then as the user scrolls down and the navbar hits the top of the screen it should transition to a fixed location at the top of the browser.

Now that we know what we want to achieve we can get started.

To begin we will need to select the navbar. We will also need to add a function that will run on every scroll event:

const nav = document.querySelector('#main')
function fixNav() {  
  console.log('The window was scrolled')
}
window.addEventListener('scroll', fixNav)

Next, we’re going to calculate the navbar location on page load. This will give us the exact pixel location of the top of the navbar:

const topOfNav = nav.offsetTop

Now that we have this calculation we can add some logic into our fixNav a function that is running on every scroll event. Our logic will add a new class to the body if the window is scrolled at or below the top of the navbar.

function fixNav() {  
  if (window.scrollY >= topOfNav) {
    document.body.classList.add('fixed-nav')
  } else {
    document.body.classList.add('fixed-nav')
  }
}

We are adding this class to the body so that we can pass this additional property down to any children that we need.

To make any visual changes happen we will need to update the style sheet:

.fixed-nav nav {
  position: fixed;
  box-shadow: 0 5px rgba(0, 0, 0, 0.1);
}

This is working but when the scroll hits the top of the navbar it causes a re-render of the rest of the page. During this re-render, the rest of the content jumps up to compensate for the navbar no longer pushing it down (as fixed elements don’t take up space).

It gives us this jumpy look:

To combat this we need to add an offset to the body content:

function fixNav() {  
  if (window.scrollY >= topOfNav) {
    document.body.style.paddingTop = nav.offsetHeight + 'px'
    document.body.classList.add('fixed-nav')
  } else {
    document.body.style.paddingTop = 0
    document.body.classList.remove('fixed-nav')
  }
}

An additional thing that we are adding is the logo to transition in when the navbar becomes fixed.

Currently, our logo styling is set to:

li.logo {  
  max-width: 0;
  overflow: hidden;
  background: white;
  transition: all 0.5s;
  font-weight: 600;
  font-size: 30px;
}

Notice the max-width and overflow? We’re going to alter these as we flow down the page. This will be triggered when the fixed-nav class is applied to the body:

 li.logo {
  max-width: 500px;
}

The final touch that we are adding to our site is a subtle increase of the site-wrap class.

Again, we are using the fixed-nav class that has been placed on the body to action this change:

.site-wrap {
  ...
  transform: scale(0.98);
  transition: transform 0.5s;
}

.fixed-nav .site-wrap {
  transform: scale(1);
}

This very subtle update in size is all that’s needed to give a nice finished feel to this site:

Today I Learned (T-I-L):

• To create a Sticky NavBar
• Transitioning the logo using max-width!🙌

That is all for Day24 ✅

Thanks for reading, See you tomorrow!