Anyone know CSS? How can I do a navbar like this?

altmman

Confirmed User

Join Date: Jan 2015

Posts: 468
Share

Post
#1

Anyone know CSS? How can I do a navbar like this?

02-10-2015, 05:40 PM

Hi I saw this navbar on CNN CNNMoney - Business, financial and personal finance news
And when you scroll down the logo shrinks. I really like this. Is there a tutorial on how to do this?
Tags: logo, navbar, scroll, shrinks, tutorial
chloelewis

Confirmed User

Join Date: Nov 2014

Posts: 101
Share

Post
#2

02-10-2015, 07:16 PM

1. Listen to the page scroll event with JavaScript
2. To know how many pixel the page scrolled down, you can look at this attribute document.documentElement.scrollTop
3. When it scrolled enough to your liking, then you can add a class to your header element with a CSS transform example: myHeader.classList.add('scaledown')

Here with the steps
and a demo

Find me on Twitter and LinkedIn | Who am I? Long read (en Francais ici)
Comment

Comment