CSS过渡不适用于添加类

调查费

我正在尝试通过以下方式使我的元素在滚动时更改大小：

<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;
    }
}

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

库马尔·高拉夫

我认为，问题在于您在媒体查询和 css 特异性中的 min-width 值，您正在将转换分配给菜单的初始值。可能是，这就是为什么，您无法看到您的 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。