0

I've managed to get a working version of a collapsible fixed header that shrinks when the user scrolls past a certain point, but what I really want to do is have the actual image change on the shrunken state.

Here is the header currently http://kmmedia.com.au/test/index.html, as you can see it just shrinks the image.

I actually want the smaller version of the image to be the red part of the logo without the writing (so a different image). Like this site http://byassociationonly.com/

I am trying to get the initial state with its own padding so its centered vertically, then on scroll to have say 10px padding top and bottom...

any ideas?

1 Answer 1

0

Use jQuery animations...

 $('header').animate({
        height: '47px'}, 300);
    $('nav').animate({
        width: '80px'}, 300);

you can see a demo here...

JS Fiddler Demo

5
  • Excellent! Thats exactly what I was after. Is it possible to add padding or margins to the smaller version? I'm trying to, but as it's a background image its acting funny and repeating. can you actually shrink the image by a percentage as well?
    – Plaedien
    Mar 27, 2014 at 4:14
  • set background-repeat: no-repeat
    – Leo
    Mar 27, 2014 at 4:27
  • EDIT I realised if you change the height in the jscript rather than the css it does what i need it too, though i can't center the larger version...
    – Plaedien
    Mar 27, 2014 at 4:48
  • if you add margin:0 auto it should center it horizontally...here's an update jsfiddle.net/ben9g/2
    – Leo
    Mar 27, 2014 at 5:39
  • After a bit more playing around, using absolute positioning as per this article: coding.smashingmagazine.com/2013/08/09/… it all works!! Thanks for your help Leo :)
    – Plaedien
    Mar 27, 2014 at 6:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.