Creating a scrollable sticky header as seen on TechCrunch.com

[danielmeade]

I imagine this is done using the magic of Javascript,

I’m looking to create a header that when a user scrolls down the page turns into a smaller, sticky version as seen on the TechCrunch.com redesign. Another great example can be seen on giglocator.com

Any help on this or a point in the right direction would be greatly appreciated!

Thanks, Daniel

[furrball1383]

I think what they did was take a sticky header and then made it so that when the scroll bar reached a certain y value a div holding the new bar either has its opacity increased to 100 or has its z index increased higher than the bg., you might want to try that. Its probably done slightly differently for tech crunch but it should work just fine for something like gig locator. For a style like tech crunches i believe they had the content in the div holding the image sprite scrolling faster than the rest of the content so that at a certain position of the scrollbar the sprite will have already scrolled to the bottom with the smaller version at which it then stays while the rest of the page continues to scroll in other words the whole tc image is in a sprite with the tech crunch wording right below it and its just set to scroll faster than the rest of the page. I believe that is done with java script. I’m sure someone with more knowledge will reply shortly

[Author]

Posts