Grow your CSS skills. Land your dream job.

How to make header height change when scrolling

  • # January 28, 2013 at 12:30 pm

    Hello,

    http://engageinteractive.co.uk/case-studies

    Does anyone know how the header of the above website changes height when you scroll down a certain amount of the page?

    I am trying to create a similar effect for a client but not sure how it is being done.

    Cheers

    # January 28, 2013 at 12:34 pm

    take a look att the [scrollMonitor](https://github.com/sakabako/scrollMonitor “scrollMonitor”) plugin. might find some cool answers.

    # January 28, 2013 at 12:48 pm

    if you check that engage.js with your debugger you will find a triggerpoint set to about 65px. and then a listener for scroll events. if the scroll is higher than the triggerpoint the css for the nav is changed.
    hope i didnt confuse you too much!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".