CSS переход не будет работать при добавлении класса - PullRequest
Новая
       9

CSS переход не будет работать при добавлении класса

0 голосов
/ 14 марта 2020

Я пытаюсь изменить размер элемента при прокрутке следующим образом: 

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

Не могу понять почему, но добавленный мной стиль перехода не дает никакого эффекта, я пытался поиграть с ним и добавить его к каждому возможному элементу с изменяющимся стилем, но результата не было вообще ... Что мне попробовать?

1 Ответ

1 голос
/ 14 марта 2020

Я думаю, проблема в том, что вы указали минимальную ширину в медиа-запросе и 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>
...