jQuery- Logo from header goes in sticky navbar when scrolling down

Question

How can you make a smaller img of your logo drop in the sticky nav when scrolling down.

I'm looking for something exactly like in this webpage http://bungobox.com/.

I got the part on how to make it fixed, but other than that i can't seem to find a way.

Thanks a lot for your answers.

Answer 1

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"