根据php中的类更改url

Question

这很不寻常，但我有一位客户想更改滚动条上的主徽标。顶部有一个标志，卷轴上有第二个标志。

我已经设法通过 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)).'">';

这不起作用，我认为它可能更像是一个“if/else”语句，但我现在不知道如何完成它。

编辑：为了澄清，我正在尝试研究如何更改滚动图像的 href 目标。为清楚起见，我想您可以将其视为相同的图像，因为其中一个是伪图像。

任何帮助都会很棒。

编辑 #2 输出标志的主题文件中的php是这样的

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

我将图像隐藏在滚动条上，但显示了一个带有文本内容的伪类（我需要显示的第二个徽标实际上只是文本） - 所以它的行为就像一个元素。我要么需要更改滚动上的 url，要么找到一种添加 php 以添加 2 个徽标的方法，然后将每个徽标隐藏在适当的滚动点。

目前这是我将徽标从图像更改为文本的方式：

.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

答案展示了如何实现 OP 要求的预期最终结果：

我要么需要更改滚动网址，要么， 想办法添加 php 来添加 2 个 logo，然后将每个 logo 隐藏在适当的滚动点。

URL 被认为是锚链接 (<a href=""/>)，因为 OP 已声明不希望更改徽标图像 url。

根据我的评论，我建议在页面上同时渲染两者并使用 css 规则来隐藏使用 display:none 的第二个徽标。这将使它在初始加载时不可见。然后，您可以使用 jQuery 跟踪滚动位置并在两个徽标元素之间交换 css 规则，隐藏第一个元素并随后显示第二个元素。或者，您也可以根据需要使用绝对定位、z-index 和不透明度来实现徽标在滚动期间过渡的淡化效果。

---

方法A： 想办法添加php添加2个logo，然后分别隐藏在合适的滚动点

您应该能够通过组合 PHP $logoDiv 变量中的元素来呈现模板中的两个徽标。

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

这种方法还有一个额外的好处是可以被浏览器预渲染，从而在徽标元素转换发生时防止较慢的系统出现延迟。

jQuery(function($) { //same as $(document).ready()
    var logos = $('.scroll-logo');
    $(window).on('scroll', function(e) {
        if ($(this).scrollTop() === 0) {
            $(logos[0]).addClass('hidden');
            $(logos[1]).removeClass('hidden');
        } else {
            $(logos[1]).addClass('hidden');
            $(logos[0]).removeClass('hidden');
        }
    });
});

.scroll-logo.hidden {
  display: none;
}

/* below rules are for demo purposes only */

div {
  position: fixed; 
}

body{
  height: 8000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div>
    <!-- <?php echo $logoDiv; ?> -->
    <a href="https:url-1.com" class="scroll-logo hidden">
      Logo Text
    </a>
    <a href="//chrome.google.com" class="scroll-logo">
      <img src="//www.google.com/chrome/static/images/chrome-logo.svg" alt="Google Chrome"/>
    </a>
</div>

---

正如你所说，你想改变一个元素的 href 属性，类似的滚动技术也可以用来改变元素的属性。允许您使用 data 属性来指定要更改的 URL。

方法B： 在滚动条上改变url（使用data-url属性）

$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)).'" data-url="https:url-1.com">';

jQuery(function($) { //same as $(document).ready()
    var logo = $('[data-url]');
    var newHref = logo.data('url');
    var originalHref = logo.attr('href');
    $(window).on('scroll', function(e) {
        if ($(this).scrollTop() === 0) {
            logo.attr('href', originalHref)
                .removeClass('hide_logo');
        } else {
            logo.attr('href', newHref)
                .addClass('hide_logo');
        }
    });
});

a.hide_logo img {
   display: none;
}

a.hide_logo:before {
    content: "Logo Text";
}

/* below is for demo purposes only */

div {
  position: fixed; 
}

body {
  height: 8000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div>
   <!-- <?php echo $logoDiv; ?> -->
    <a href="//chrome.google.com" data-url="https:url-1.com">
      <img src="//www.google.com/chrome/static/images/chrome-logo.svg" alt="Google Chrome"/>
    </a>
</div>

方法 B + Scroll-Spy 类

要作为滚动间谍运行，侦听 window-scrolled 类，您只需使用 hasClass 而不是检查 scrollTop 的位置。将logo.hasClass 更改为添加了类的适当元素。

jQuery(function($) { //same as $(document).ready()
    var logo = $('[data-url]');
    var newHref = logo.data('url');
    var originalHref = logo.attr('href');
    var scrollSpy = null;
    $(window).on('scroll', function(e) {
        if (null !== scrollSpy) {
            //cancel previous delay
            window.clearTimeout(scrollSpy);
        }
        //delay scrollSpy to ensure class is not added after checking
        scrollSpy = window.setTimeout(function() {
            if (!logo.hasClass('window-scrolled')) {
                logo.attr('href', originalHref);
            } else {
                logo.attr('href', newHref);
            }
        }, 250); //adjust timeout as desired
    });


    //--- demo purposes only (DO NOT USE BELOW) ---
    $(window).on('scroll', function(e) {
        if ($(this).scrollTop() === 0) {
            logo.removeClass('window-scrolled');
        } else {
            logo.addClass('window-scrolled');
        }
    });
});

a.window-scrolled img {
   display: none;
}

a.window-scrolled:before {
    content: "Logo Text";
}

/* below is for demo purposes only */

div {
  position: fixed; 
}

body {
  height: 8000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div>
   <!-- <?php echo $logoDiv; ?> -->
    <a href="//chrome.google.com" data-url="https:url-1.com">
      <img src="//www.google.com/chrome/static/images/chrome-logo.svg" alt="Google Chrome"/>
    </a>
</div>

或者，您也可以使用$('.window-scrolled').length === 0 来确定是否有任何元素具有该类，或者指定window-scrolled 的所需元素父元素，就像$('[selector] .window-scrolled') 一样（将[选择器] 替换为所需的父元素选择器，即@987654345 @)。

Answer 2

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

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