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个徽标，然后将每个徽标隐藏在适当的滚动点上。

URL被认为是锚链接（<a href=""/>），因为OP宣称不希望更改徽标图像url。

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

方法A： 找到一种添加php的方法，以添加2个徽标，然后将每个徽标隐藏在适当的滚动点上

通过组合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： 更改滚动网址（使用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>  <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 +滚动间谍类

要以滚动间谍的身份运行，而是监听类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>  <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')的所需元素父级（用所需的父级替换[selector]元素选择器，即div.wrapper）。

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

根据PHP中的类更改URL

2 个答案: