Fixed header on-scroll with jQuery animate with stop

Question

After long search on google and everywhere I couldnt find a solution to my problem. I am developing a wordpress theme and having issue with my header on scrolling... On fast scrollbar scrolling the menu, logo, and header height does not return back to its state.

How i can fix that???

i am using this code:

jQuery(function(){
    jQuery('.header-v4').data('size','big');

    });

    if(jQuery(".header-v4.header-1").length > 0){
    var ot = jQuery(".header-v4.header-1").offset().top;
    var head_height = jQuery(".header-v4").height();
    }


jQuery(window).scroll(function(){

         var sticky = jQuery('.header-v4.header-1,.header-v4.header-2');            

                if(sticky.length > 0){
                    if(jQuery(document).scrollTop() > ot){
                        sticky.addClass('fixed');
                        jQuery('.band.blog,#slider_holder').css('marginTop',head_height);
                    }else{
                        sticky.removeClass('fixed');
                        jQuery('.band.blog,#slider_holder').css('marginTop',0);
                    }
                }



                if(jQuery(document).scrollTop() > 200){

                    if(jQuery('.header-v4').data('size') == 'big')
                    {
                        jQuery('.header-v4').data('size','small');

                        //Header-1
                        jQuery('.header-1 img.logo').stop().animate({width:'80%'},'fast');
                        jQuery('.header-1 .logo_vertical_align').stop().animate({marginTop:'15px'},'fast');
                        jQuery('.header-1 .navigation').stop().animate({marginBottom:'15px'},'fast');
                        jQuery('.header-1 .nav-header-v4').stop().animate({height:'0px'},'fast');
                        jQuery('.header-v4.header-1').stop().animate({height:'60px'},'fast');

                    }


                }else{

                        if(jQuery('.header-v4.fixed').data('size') == 'small')
                    {
                        jQuery('.header-v4.fixed').data('size','big');

                        //Header-1
                        jQuery('.header-1 img.logo').stop().animate({width:'100%'},'fast');
                        jQuery('.header-1 .logo_vertical_align').stop().animate({marginTop:'30px'},'fast');
                        jQuery('.header-1 .navigation').stop().animate({marginBottom:'0px'},'fast');
                        jQuery('.header-1 .nav-header-v4').stop().animate({height:'96px'},'fast');
                        jQuery('.header-v4.header-1.fixed').stop().animate({height:head_height},'fast')


                    }  
            }
    });

Really appreciate your support

the initial code was taken from this post : https://stackoverflow.com/a/16442479

you can test the issue on this url : http://expobizxml.janxcode.com

What do you mean it doesnt return back to its state. Its working fine for me on the link you posted. — Shikhar, Nov 11 '14 at 07:53

Pixel Rubble · Answer 1 · 2014-11-11T13:34:47.590

0

I noticed that when you scroll back up, the second stage of the top bar doesn't return to it's original size.

After scrolling and returning back to the second stage, class="band header-v4 header-1 fixed" height="81px" but it should be "96px" when you get to the second stage of the header.

edited Nov 11 '14 at 13:34

answered Nov 11 '14 at 13:13

Pixel Rubble

1,104
3
14
26

score 0 · Accepted Answer · answered Nov 12 '14 at 07:41

Thanks for your contribution and for your time, i have fixed it by removing the fixed class name

if(jQuery('.header-v4.fixed').data('size') == 'small')
                {
                    jQuery('.header-v4.fixed').data('size','big');

.....

FiSH GRAPHICS, thanks for your comment i will chk why it is like that

Fixed header on-scroll with jQuery animate with stop

2 Answers2