Fixed header on-scroll with jQuery animate with stop

2 Views

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???

Read More

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

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. 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.

  2. 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