Изменить фиксированный логотип заголовка при прокрутке вниз

Question

Мне нужно изменить логотип в фиксированном заголовке при прохождении разных разделов.

Если вы посмотрите на этот сайт, он меняет цвет при прокрутке вниз. Мне нужно, чтобы эта функция была на моем сайте. Это сайт, над которым я сейчас работаю.

Построен с использованием темы WordPress Divi.

Пробовал новые вещи, но ничего из этого не работает. Кто-нибудь может порекомендовать, как кодировать эту функцию?

Я пытался использовать пользовательский CSS внутри модуля divi, но он не работает.

У меня есть этот код CSS, который использовался для обычного заголовка, чтобы прикрепить заголовок.

#logo {
opacity:1;
display:inherit;
margin: 0 0 0 0;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
#logo.second-logo {
opacity:0;
margin: 0 0 -200px -130px;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.et-fixed-header #logo {
opacity: 0;
margin: -200px 0px 0 0px;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
 
}
.et-fixed-header #logo.second-logo {
opacity:1;
margin: 0 0 0 -90px !important;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}

Итак, когда пользователь прокручивает вниз и пропускает другой раздел, это .et-fixed-header #logo .et-fixed-header # logo.second-logo

Я хочу, чтобы прозрачность изменялась динамически при прокрутке вниз и пропуске другого раздела.