jQuery Forum

Hi guys

I would like to make a jquery on scroll header effect. I've just added some changes in to the code but it's not working they way I want. I want to make the effect - when I scroll down a bit pixel for the header to change the height to small. Or show the hidden header with other styles

So when scrolling the normal header to slide up and then show the hidden header like slide down... I've spent much time on this but it's only working with fadeIn and fadeOut

1. $(function() {
2. $('.header-small').hide();
3. var bar = $('header');
4. var top = bar.css('top');
5. $(window).scroll(function() {
6. if($(this).scrollTop() > 50) {
7. bar.stop().animate({'top' : '0px'}, 200);
8.       $('header').fadeOut('fast');
9.   $('.header-small').fadeIn('fast');
10. } else {
11. bar.stop().animate({'top' : '20px'}, 200);
12. $('header').fadeIn('fast');
13. $('.header-small').fadeOut('fast');
14. }
15. });
16. });

Working demo / http://jsfiddle.net/qm4Zp/2/embedded/result/
Please could somebody help me with this?
Thanks

How can I set a cookie when a background color is changed? I created a basic switcher which changes the body color, but I want to save the changed color in a cookie.

jQuery code:

        $('.first li ').click(function (e) {

            e.preventDefault(); $(this).parent().parent().find('img').removeClass('active');

            $(this).addClass('active');

        });

        $('.first li').click(function (e) {

            e.preventDefault(); $(this).parent().parent().find('img').removeClass('active');

            $(this).addClass('active');

             var src = $(this).find('img').attr('src');

            $('body').css('backgroundImage', 'url(' + src + ')');

           $.cookie('backgroundImage', bg, { expires: 365, path: '/' });

           if ($.cookie("backgroundImage")) { $('body').css('backgroundImage', $.cookie("backgroundImage")); } 

     });

http://jsfiddle.net/5HV28/