Changing size and content of header at scrolling i

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.

Answer 1

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

Answer 2

Easy use jquery:

$(window).scroll(function(){
if($(window).scrollTop() >= $('.header').outerHeight()) {
// put content here for if the page has scrolled 200 pixels
}
});

Make sure you have a js file though

Answer 3

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);
      }  
  }
});

Answer 4

Since you need to style the inner element of navigation it will be better to add class on navigation to style inner items

<div class="outer">
<div id="menu">affffd</div>

and js

$(window).scroll(function () {
    var sc = $(window).scrollTop();
    if (sc > 50) {
        $("#menu").addClass("big");
    } else {
        $("#menu").removeClass("big");
    }
});

and finally css

    #menu {
    position:fixed;
    height:50px;
    background:#ccc;
    left:0;
    top:0;
    float:left;
    width:100%;
}
.outer {
    height:800px;
}

#menu.big {
    height:20px;
}

here is the link

Answer 5

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.