Javascript 在php中基于类更改url

这是不寻常的，但我有一个客户谁想改变滚动的主要标志。顶部有一个徽标，卷轴上有第二个徽标

我已经设法通过css实现了徽标的可见更改，方法是使用一个图像，然后滚动隐藏图像，并使用一个：：before伪类，第二个徽标是基于文本的

然而，问题是我需要根据类更改菜单php文件中的url，因为两个徽标需要转到不同的url

不幸的是，我不知道如何编写php

我已经找到了相关的php文件，并尝试将其编辑为：

$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)).'">';

---

您可以在页面中使用以下代码来更改图像

$(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
    }
      });
});

---

答案说明了如何实现OPs要求的预期最终结果：

我需要更改滚动条上的url，或者， 找到一种添加php的方法，添加2个徽标，然后在适当的滚动点隐藏每个徽标

URL被认为是锚定链接

---

我不知道你为什么要把PHP卷入其中？PHP没有任何关于客户端的线索。只需打印两个链接并隐藏/显示正确的链接，具体取决于用户是否已滚动。另外，class=.windowscrolled应该是class=windowscrolled，而不需要php。google for javascript更改Scroll上的图像url尝试一下这个抱歉-所以我使用php的唯一原因是因为在主题文件中，这个特定的php文件控制了url，我当时假设我会在这里进行编辑。我最初尝试了javascript，但没有成功。我可能理解错误-但@Shobi的建议是更改图像的src url-我实际上是在尝试更改图像指向的url。几乎像同一个图像，但它在不同的点上到达不同的位置。你好，谢谢你-我的问题是，我实际上没有交换一个图像，它本质上是相同的图像，但在不同的点上有不同的HREF。我似乎无法在php主题文件中添加两个不同的徽标，所以我只有一个图像，然后在滚动屏幕上显示图像并显示一个带有文本内容的before伪类。因为它只是另一个元素的伪元素，它的行为就像一个元素——我希望这是有意义的——我需要的是更改一个元素的urlquestion@MrToad在同一变量中呈现两个元素，向要隐藏的元素添加隐藏类。一旦模板从变量回显html，css和js将处理重置。此解决方案适用于任意两个元素，而不仅仅是图像。我用图像演示了它的功能@MrToad换句话说$logoDiv=；我需要更改同一图像上的url-徽标看起来不同，因为我将其更改为添加到问题中的psuedo类las嗨，谢谢你-但我遇到的问题是，我实际上没有交换图像，它本质上是相同的图像，但在不同点具有不同的HREF。我似乎无法在php主题文件中添加两个不同的徽标，所以我只有一个图像，然后在滚动屏幕上显示图像并显示一个带有文本内容的before伪类。因为它只是另一个元素的伪元素，它的行为就像一个元素——我希望这是有意义的——我需要的是更改一个元素的url。我可以将php添加到原始问题中

.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;
}

$(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
    }
      });
});

$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)).'">Logo Text</a>
<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)).'">';