@4Geka
PHP

Смена логотипа при скролле, в чем ошибка моя?

Привет всем, в общем использую rd navbar и пытаюсь сделать при скролле смену логотипа, с одного цвета на новый. В принципе сделал, но первый логотип перекрывает второй и кажется как будто ничего не меняется, а нужно наоборот. Прошу взгляните где ошибся?

<div class="rd-navbar-brand"><a href="1_main.html" class="brand-name"><img src="images/logo-white.png" style="width: 230px;"></a></div>


.rd-navbar-brand .brand-name {
    font-size: 36px;
    line-height: 22px;
    font-weight: 400;
    text-transform: uppercase;
    color: #fff;
    display: inline-block;
    position: relative;
}

.rd-navbar-static.rd-navbar--is-stuck .rd-navbar-brand .brand-name, .rd-navbar-static.rd-navbar--is-clone .rd-navbar-brand .brand-name, .rd-navbar-fullwidth.rd-navbar--is-stuck .rd-navbar-brand .brand-name, .rd-navbar-fullwidth.rd-navbar--is-clone .rd-navbar-brand .brand-name .rd-navbar-brand {
    background: url(../images/logo-color.png) 100% 100% no-repeat;
    background-size: cover;
    width: 230px;
}

.rd-navbar-static .rd-navbar-brand, .rd-navbar-static .rd-navbar-nav > li > a, .rd-navbar-static .rd-navbar-search-toggle, .rd-navbar-fullwidth .rd-navbar-brand, .rd-navbar-fullwidth .rd-navbar-nav > li > a, .rd-navbar-fullwidth .rd-navbar-search-toggle {
    position: relative;
    z-index: 2;
}

.rd-navbar-static.rd-navbar--is-stuck .rd-navbar-brand, .rd-navbar-static.rd-navbar--is-clone .rd-navbar-brand, .rd-navbar-fullwidth.rd-navbar--is-stuck .rd-navbar-brand, .rd-navbar-fullwidth.rd-navbar--is-clone .rd-navbar-brand {
    padding-top: 3px;
}
  • Вопрос задан
  • 395 просмотров
Пригласить эксперта
Ответы на вопрос 1
one_day
@one_day
первый логотип вставляете тегом img, когда второй уже бэкграундом в стилях, эти два способа не взаимоисключают друг друга

посмотрите в диспетчере во время скролла, как меняются классы в navbar (rd-navbar-fixed/rd-navbar-static) и сделайте что-то по принципу:

<div class="rd-navbar-fixed">
...
<div class="rd-navbar-brand">
  <a href="1_main.html" class="brand-name"><img class="img1" src="images/logo-white.png" style="width: 230px;">
    <img class="img2" src="images/logo-black.png" style="width: 230px;">
  </a>
  </div>
....
</div>

.img1, .img2 {
display:none;
}
.rd-navbar-static .img1 {
display: block;
}
.rd-navbar-fixed .img2 {
display: block;
}


https://codepen.io/one_day/pen/yoXeBb
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы