Today I learned how to create a sticky nav bar using HTML, CSS, and JavaScript. This kind of navigation is very common nowadays. This involved several key concepts:
- How to make navbar sticky on scroll using postion: fixed property
- offsetHeight property returns the height of an element including padding, and the border of the element
- justifying content in the center with justify-content: space-between property
- measuring vertical scroll distance in pixels with window.scrollY property
- using justify-content property is used to align items in the center of the container
- adding a pseudo class to the navbar
- adding CSS class to an element in JavaScript when a condition is met with element.classList.add() method
- removing a CSS class from an element in JavaScript when a condition is not met with element.classList.remove() method
- arranging items in a row from left to right with flex-direction: row property
- using 'vh' unit to set the height of the navbar to the viewport height
- how to create animated bg via CSS