Changing size and content of header at scrolling in browser with CSS

Question

Any idea how to make such a thing as seen here http://studiompls.com/case-studies/crown-maple/

Header goes smaller and logo changes to different button. Can it be done with CSS without writing any JS?

Cheers!

---

Update:

if JS is a must, any link you can recommend to learn? Thanks.

Solution 1

You can do it with jquery. It's pretty easy.

Here's a demo: http://jsfiddle.net/jezzipin/JJ8Jc/

$(function(){
  $('#header_nav').data('size','big');
});

$(window).scroll(function(){
  if($(document).scrollTop() > 0)
{
    if($('#header_nav').data('size') == 'big')
    {
        $('#header_nav').data('size','small');
        $('#header_nav').stop().animate({
            height:'40px'
        },600);
    }
}
else
  {
    if($('#header_nav').data('size') == 'small')
      {
        $('#header_nav').data('size','big');
        $('#header_nav').stop().animate({
            height:'100px'
        },600);
      }  
  }
});

Solution 2

I made a fiddle that only uses CSS, no Javascript, to achieve roughly the same effect: the header grows smaller when you scroll down past the first section, and its icon changes. And of course when you scroll back up, the header grows again and gets its old icon back. Done with nothing more esoteric than a couple of :hovers (and a transition, but that's just icing; it works on non-transition-aware browsers).

This may not be exactly what you are after, but you can use it as a fallback in case the user has Javascript switched off.

Solution 3

Here is whole tutorial on that effect and I don't think it is possible to do it without js 'cause you need to checking on scroll, and do toggleClass with jQueryUI for example or something :)

hope it helps ;)

Cheers