Anyone know CSS? How can I do a navbar like this? - GoFuckYourself.com

altmman · 02-10-2015, 07: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?

chloelewis · 02-10-2015, 09: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

02-10-2015, 07:40 PM	#1
altmman Confirmed User Industry Role: Join Date: Jan 2015 Location: usa Posts: 468	Anyone know CSS? How can I do a navbar like this? 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?

02-10-2015, 09:16 PM	#2
chloelewis Confirmed User Industry Role: Join Date: Nov 2014 Location: Montreal Posts: 101	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)