根据php中的类更改url

Question

It's unusual, but I have a client who would like to change the primary logo on scroll. One logo at the top, a second logo on scroll.

I have managed to implement the visible change of logo through css by using an image and then on scroll hiding the image and using a ::before pseudo class (the second logo is text based).

The problem however is I need to change the url in the menu php file based on the class as the two logos need to go to seperate URLS.

Unfortunately I do not know how to write php.

I have found the relevant php file and have tried editing it to:

$logoDiv = '<a href="https://www.link1.com" target="_blank" class="navbar-brand"' . $data_padding_shrink . ' data-minheight="'.(($LOGO->logo_min == "") ? "20" : esc_attr($LOGO->logo_min)).'">';

$logoDiv = '<a href="https://www.www.link2.com" target="_blank" class=".window-scrolled"' . $data_padding_shrink . ' data-minheight="'.(($LOGO->logo_min == "") ? "20" : esc_attr($LOGO->logo_min)).'">';

This does not work and I think it may be more of an 'if/else' statement but I do not now how to complete it.

Edit: So to clarify, I am trying to work out how to change an href destination for an image on scroll. For clarity, I guess you could think of it as the same image, as one is a psuedo on the other.

Any help would be great.

Edit #2 The php from the theme files that outputs the logo is this

$logoDiv = '<a href="'.esc_url( home_url( get_current_blog_id(), '/' ) ).'" class="navbar-brand"' . $data_padding_shrink . ' data-minheight="'.(($LOGO->logo_min == "") ? "20" : esc_attr($LOGO->logo_min)).'">';
        $logoDiv = '<a href="https:url-1.com" target="_blank" class="navbar-brand"' . $data_padding_shrink . ' data-minheight="'.(($LOGO->logo_min == "") ? "20" : esc_attr($LOGO->logo_min)).'">';

I am hiding the image on scroll but showing a pseudo class with text content (the second logo I need to show is actually just text) - so it behaves like one element. I either need to change the url on scroll OR, find a way to add php to add 2 logos, and then hide each one at the appropriate scroll points.

Currently this is how I change the logo from an image to text:

.logo-image.logo-skinnable img {
    opacity: 1;
    transition: opacity 900ms;
}

.window-scrolled .logo-image.logo-skinnable img {
    opacity: 0;
    transition: opacity 900ms;
}


.logo-image.logo-skinnable::before {
    font-size: 29px !important;
    font-family: "Poppins";
    content: 'word logo';
    opacity: 0;
    transition: opacity 700ms;
    position: absolute;
    top: 38px;
}

Answer 1

You can use the following code in the page to change the image.

$(document).ready(function(){
    $( window ).scroll(function() {
    //change image css in here when scrolling
    if ($(window).scrollTop()==0) {
        //here you can set the initial logo when the screen comes back to the top
    }
      });
});