Streaming live at 10am (PST)

Small Header when i scroll?


#1

Hello guys,

I have a little problem,

I want to make a jQuery effect to my header when i scroll to make it a bit smaller with the Logo and Nav too. I have find a good solution but i have a problem.

I use this code:

<script>
$(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);
      }  
  }
});
</script>

When i put this code the only part that going smaller its the background part of header, the Logo and Nav are same like before. I want something like this: http://themenectar.com/demo/salient/

Any help its appreciated smile

Thanks,
Deni


#2

I actually just did this exact thing for one of my sites: http://www.onthemend.com.au/

The code is very similar to yours, but I changed the code to utilise background images instead of what is suggested in this tutorial (http://www.webdesignerdepot.com/2013/03/how-to-create-a-resizing-menu-bar/).

Let me know if you need any help!


#3

Hello Karl,

I see what you have done, this is what i want, i will try it and if i need help i will contact you.

Thank you very much for your help!

Best,
Deni


#4