The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

How to make header height change when scrolling

  • # January 28, 2013 at 12:30 pm


    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.


    # January 28, 2013 at 12:34 pm

    take a look att the [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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed