修正了jQuery滚动时使用停止动画的标题

Fixed header on-scroll with jQuery animate with stop

本文关键字:动画 标题 jQuery 滚动      更新时间:2023-09-26

在谷歌上搜索了很长时间,到处都找不到解决问题的方法。我正在开发一个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

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

我注意到,当您向上滚动时,顶部栏的第二阶段不会恢复到原来的大小。

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

感谢您的贡献和时间,我已经通过删除固定类名来修复它

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

FiSH GRAPHICS,感谢您的评论,我会询问为什么它像