I make basic example for you,
check it : http://jsfiddle.net/mehmetakifalp/pt4vB/
$(window).scroll(function(){
$(".headLogo").css("height","60px");
$(".headLogo").css("background","#ff0000");
$(".headLogo").css("position","fixed");
});
Logic like this :
- When the scroll down on window, find class and edit some Css property -
If you can calculate scroll position, u can manage css. e.g when the scroll position == 0, remove old css properties.
furthermore, check this page; 1- jQuery - Sticky header that shrinks when scrolling down 2- http://jquery-plugins.net/tag/sticky-scroll 3- http://jsfiddle.net/HbVte/1/embedded/result/
Your google dork : "sticky header"