Changing from one header to the other
We have two headers. One is a full header, which is 100px in height. The other is a condensed header, which is 50px in height. We are creating a parallax site where, once the second section hits the top of the browser, we want the condensed header to replace the full header.
Currently, we have the full header coded out in a div called header-main. We created another div for the smaller header, called header-sub, which has display set to none, by default. Here's what I've started for my jQuery:
$(document).scroll(function(e){
var section = $('#two').position()
if(section.top < 0 ){
// this is where I'm stuck
}
});
Thanks in advance for any help.