Question

我有一个粘性标题，在达到160的高度时使用jQuery固定在滚动上。

$(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");
} 
});

这适用于显示/隐藏元素，但我希望整个粘性导航和背景栏在滚动时设置动画。

我尝试在标题部分应用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

修改

您发布的笔的标题始终是固定的，而不是粘性的。如果您需要此功能，则需要从一开始就提供.main position: 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; }

如何设置粘贴标题的动画？

1 个答案: