如何动画粘滞标题？

Question

我有一个粘头，其达到160

$(window).scroll(function() 
{ 

    if($(window).scrollTop() > 160) 
{ 

     $('.dark-menu').addClass('stickyNav'); 
     $('header').addClass('mainHeaderFixed'); 
     $(".menu-second-menu-container").hide(); 
     $(".menu-first-menu-container").addClass('new-end'); 
     $("a.main-logo").hide(); 
     $("a.small-logo").show(); 
     $(".bp-phone").addClass("stickyNumber"); 
     $("img.telephoneIconHeader").addClass("stickyImg"); 
     $("a.topHeaderMailto").addClass("stickyaa");   
} 
else 
{ 
     $('.dark-menu').removeClass('stickyNav'); 
     $("a.topHeaderMailto").removeClass("stickyaa"); 
     $('header').removeClass('mainHeaderFixed'); 
     $(".menu-second-menu-container").show(); 
     $(".menu-first-menu-container").removeClass('new-end'); 
     $("a.main-logo").show(); 
     $("a.small-logo").hide(); 
     $(".bp-phone").removeClass("stickyNumber"); 
     $("img.telephoneIconHeader").removeClass("stickyImg"); 
} 
}); 

这是为精细显示/隐藏元件的高度时使用jQuery固定在涡旋件，但我希望整个粘NAV和backbar动画上滚动。

我试图在标题部分应用CSS：

-webkit-transition: height 5s; 
    -moz-transition: height 5s; 
    transition: height 5s; 

但是，这是行不通的。我能做些什么来使这个动画滚动？

这里是我的地盘：

http://insurancefocus.bemediadev.com.au/

这里是我想达到的目标：

https://codepen.io/malZiiirA/pen/cbfED

Answer 1

编辑

您发布的笔的标题始终是固定的，而不是粘性。如果你想这样做，你需要从一开始就给你的.mainposition: fixed，只是改变元素的高度。

的转变对你的头没有影响，因为它没有一套height。当您更换两个徽标版本时，它只会被重新计算。

有关它的更多信息，请参阅css3 height transition not working或者如果你不想指定height，看到How can I transition height: 0; to height: auto; using CSS?

老

设置在高度的过渡将只显示如果高度的影响元素实际上改变了。在你的情况下，高度保持不变。尝试使用以下CSS来更改元素的height，您将看到转换。

.main { 
    height: 100px; 

    -webkit-transition: height 5s; 
    -moz-transition: height 5s; 
    transition: height 5s; 
} 

.main.mainHeaderFixed { 
    height: 160px; 
}