XF 2.2 On mobile, change logo to small logo on scroll

[Static-Xbox]

Hi all,

Assuming we've defined a 'small logo' elsewhere, then we want to call that field when users scroll down on mobile, what's the best approach for doing so? We have a bit of base code that we think should work, but need to fine tune it...or completely rewrite it....either way, what's the best approach here to swap out the usual p-nav-smallLogo and display the custom field's logo in its' place.

Here's what we have at the moment:

@media (max-width: @xf-responsiveMedium) {
.has-js .p-header {
display: initial;
}
.p-header-logo {
max-width: 100%;
margin: 0 auto;
}
.p-header-logo.p-header-logo--image img {
max-height: 80px;
}
.p-nav-smallLogo img{
display:none;
}
.has-js .sc_logoSmall {
opacity: 0;
transition: all .25s ease;
}
.p-navSticky.is-sticky .sc_logoSmall {
opacity: 1;
transition: all .25s ease;
}

(disclosure: using the "sc_logoSmall" field created from an older add-on that doesn't function properly, but the field's still there, so I figured I'd still call it here)

Can anyone lend a bit of a hand here in telling me where I'm going wrong?

Thanks!