Inpsired by sixsocks , this effect will mirror page content in the header component and translate it on scroll, giving the header the appearance of a mirror.
The trick works by creating a duplication of the page content in javascript and appending it to the header element. In CSS, the content is then flipped upside down.
For the scroll effect, I created a scroll event listener, which captures window.pageYOffset.
window.pageYOffset is the number of pixels the document has been scrolled vertically. Setting the translateY of the duped content to scrollTop will move the content vertically by the amount equal to the current scroll position.
Applying overflow:hidden to the header ensures that the content is contained to the header.