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

Question

[Makfroy]

Привет всем, в общем использую 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;
}

Comments

[Максим Тимофеев]

ссылка будет? пока вижу. что 1 вы z-index указали, а второму нет.

Answer 1

[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

Comments

[Makfroy]

one_day Что то не удается отследить и сделать все правильно ci62094-netcat.tw1.ru/template/1_main.html

[one_day]

добавить:

.rd-navbar--is-clone.rd-navbar--is-stuck .img2 {
display: block;
}
.rd-navbar--is-clone.rd-navbar--is-stuck .img1 {
display: none;
}