CSS 过渡在添加类时不起作用

Question

我正试图通过以下方式更改滚动上的元素大小：

<script>
jQuery(function ($) { 
let menu = $('#menu');
$(document).scroll(function() {
if($(this).scrollTop() > 0){
menu.addClass('stickyMenu');
}else{
menu.removeClass('stickyMenu');
}
});
})
</script>
#menu , #menu img , #menu .et_pb_column{
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
@media (min-width: 981px){
.stickyMenu{
position: fixed;
width: 100%;
height: 90px;
}
.stickyMenu .et_pb_column{
height: 85px;
}
.stickyMenu img{
max-height: 75px;
}
}

我不知道为什么，但我添加的过渡样式没有任何效果，我试着使用它，并随着风格的变化将其添加到每一个可能的元素中，但根本没有结果。。。我应该尝试什么？

Answer 1

我认为，问题在于媒体查询中的最小宽度值和css的特定性，您将转换分配给菜单的初始值。可能是，这就是为什么，你无法看到你的css更改。否则，您的代码就可以了。

jQuery(function ($) { 
let menu = $('#menu');
$(document).scroll(function() {
if($(this).scrollTop() > 0){
menu.addClass('stickyMenu');
}else{
menu.removeClass('stickyMenu');
}
});
})

#menu , #menu img , #menu .et_pb_column{
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
background-color: #f00;
height: 20px;
}
@media screen and (min-width: 480px){
#menu.stickyMenu{
position: fixed;
width: 100%;
height: 90px;
}
#menu.stickyMenu .et_pb_column{
height: 85px;
}
#menu.stickyMenu img{
max-height: 75px;
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menu">
<div class="et_pb_column">Hello World</div>
</div>
<div id="main">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae tempore rerum fugiat, inventore corrupti sapiente quo laudantium culpa, nam earum placeat alias delectus? Illo nulla autem quisquam. Magnam labore minima exercitationem! Mollitia, consequuntur aperiam! Quibusdam officiis quia, illum nesciunt ab labore! Praesentium corporis nisi facere vero eum quas molestiae, quod officiis odit sit, vitae non neque velit doloribus consequuntur. Iusto vel, laudantium in laboriosam expedita libero quod quam consectetur inventore! In repellendus ratione sit doloribus culpa similique fugiat, sint voluptas, explicabo vero odio quo unde quasi sunt a fuga mollitia rem. Voluptate, qui quia exercitationem quis tempora, veniam reiciendis harum et eum, repellat consectetur repellendus optio! Vel et nemo soluta debitis voluptatum non, molestias laudantium, placeat cupiditate id labore accusamus consequatur. Dolores ipsum porro quo deserunt adipisci cumque incidunt amet tenetur blanditiis dolore eligendi
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae tempore rerum fugiat, inventore corrupti sapiente quo laudantium culpa, nam earum placeat alias delectus? Illo nulla autem quisquam. Magnam labore minima exercitationem! Mollitia, consequuntur aperiam! Quibusdam officiis quia, illum nesciunt ab labore! Praesentium corporis nisi facere vero eum quas molestiae, quod officiis odit sit, vitae non neque velit doloribus consequuntur. Iusto vel, laudantium in laboriosam expedita libero quod quam consectetur inventore! In repellendus ratione sit doloribus culpa similique fugiat, sint voluptas, explicabo vero odio quo unde quasi sunt a fuga mollitia rem. Voluptate, qui quia exercitationem quis tempora, veniam reiciendis harum et eum, repellat consectetur repellendus optio! Vel et nemo soluta debitis voluptatum non, molestias laudantium, placeat cupiditate id labore accusamus consequatur. Dolores ipsum porro quo deserunt adipisci cumque incidunt amet tenetur blanditiis dolore eligendi
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae tempore rerum fugiat, inventore corrupti sapiente quo laudantium culpa, nam earum placeat alias delectus? Illo nulla autem quisquam. Magnam labore minima exercitationem! Mollitia, consequuntur aperiam! Quibusdam officiis quia, illum nesciunt ab labore! Praesentium corporis nisi facere vero eum quas molestiae, quod officiis odit sit, vitae non neque velit doloribus consequuntur. Iusto vel, laudantium in laboriosam expedita libero quod quam consectetur inventore! In repellendus ratione sit doloribus culpa similique fugiat, sint voluptas, explicabo vero odio quo unde quasi sunt a fuga mollitia rem. Voluptate, qui quia exercitationem quis tempora, veniam reiciendis harum et eum, repellat consectetur repellendus optio! Vel et nemo soluta debitis voluptatum non, molestias laudantium, placeat cupiditate id labore accusamus consequatur. Dolores ipsum porro quo deserunt adipisci cumque incidunt amet tenetur blanditiis dolore eligendi
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae tempore rerum fugiat, inventore corrupti sapiente quo laudantium culpa, nam earum placeat alias delectus? Illo nulla autem quisquam. Magnam labore minima exercitationem! Mollitia, consequuntur aperiam! Quibusdam officiis quia, illum nesciunt ab labore! Praesentium corporis nisi facere vero eum quas molestiae, quod officiis odit sit, vitae non neque velit doloribus consequuntur. Iusto vel, laudantium in laboriosam expedita libero quod quam consectetur inventore! In repellendus ratione sit doloribus culpa similique fugiat, sint voluptas, explicabo vero odio quo unde quasi sunt a fuga mollitia rem. Voluptate, qui quia exercitationem quis tempora, veniam reiciendis harum et eum, repellat consectetur repellendus optio! Vel et nemo soluta debitis voluptatum non, molestias laudantium, placeat cupiditate id labore accusamus consequatur. Dolores ipsum porro quo deserunt adipisci cumque incidunt amet tenetur blanditiis dolore eligendi
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae tempore rerum fugiat, inventore corrupti sapiente quo laudantium culpa, nam earum placeat alias delectus? Illo nulla autem quisquam. Magnam labore minima exercitationem! Mollitia, consequuntur aperiam! Quibusdam officiis quia, illum nesciunt ab labore! Praesentium corporis nisi facere vero eum quas molestiae, quod officiis odit sit, vitae non neque velit doloribus consequuntur. Iusto vel, laudantium in laboriosam expedita libero quod quam consectetur inventore! In repellendus ratione sit doloribus culpa similique fugiat, sint voluptas, explicabo vero odio quo unde quasi sunt a fuga mollitia rem. Voluptate, qui quia exercitationem quis tempora, veniam reiciendis harum et eum, repellat consectetur repellendus optio! Vel et nemo soluta debitis voluptatum non, molestias laudantium, placeat cupiditate id labore accusamus consequatur. Dolores ipsum porro quo deserunt adipisci cumque incidunt amet tenetur blanditiis dolore eligendi
</div>