固定标题滚动与jQuery动画与停止

时间:2014-11-11 04:39:55

标签: javascript jquery html css wordpress

经过长时间搜索谷歌和所有地方我无法找到解决问题的方法。我正在开发一个wordpress主题并且在滚动时遇到问题...在快速滚动条滚动时,菜单,徽标和标题高度不会返回到其状态。

我如何解决这个问题?

我正在使用此代码:

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')


                    }  
            }
    });

非常感谢您的支持

初始代码来自这篇文章:https://stackoverflow.com/a/16442479

您可以在此网址上测试问题:http://expobizxml.janxcode.com

2 个答案:

答案 0 :(得分:0)

我注意到当你向上滚动时,顶栏的第二个阶段没有恢复到原来的大小。

滚动并返回第二阶段class="band header-v4 header-1 fixed" height="81px"后,当您到达标题的第二阶段时,它应为"96px"

答案 1 :(得分:0)

感谢您的贡献以及您的时间,我通过删除固定的班级名称来修复它

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

.....

FiSH GRAPHICS,感谢您的评论我会知道为什么会这样