更改URL基于在PHP类

问题描述 投票：2回答：2

这是不寻常的，但我有一位客户，谁愿意来改变滚动的主要标志。在顶部的一个标志，在滚动第二标志。

我已设法通过使用图像，然后滚动隐藏的形象和使用::伪类之前（第二个标志是基于文本）实施标志通过CSS的明显变化。

但问题是我需要改变的URL在基于类的两个标识需要去单独的URL中的菜单PHP文件。

不幸的是，我不知道怎么写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;
}
javascript php wordpress
2个回答
4
投票

答案演示了如何完成从有机磷农药的需求期望的最终结果：

我要么需要更改URL上滚动或，找到一个方法来添加PHP增加2个徽标，然后隐藏每一个在相应的滚动点。

URL被认为是对锚链接（<a href=""/>），作为OP已宣布该标志图像的URL不希望被改变。

按我的意见，我建议同时在页面上呈现两个，并使用CSS规则隐藏使用display:none第二标志。这将使它在初始加载不可见。然后你可以使用jQuery来跟踪滚动位置并交换两个标志元素之间的CSS规则，隐藏第一及以后显示第二。或者也可以使用绝对定位，z索引和不透明度，以根据需要实现的标志转变的滚动时的衰落的影响。

方法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：更改滚动的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 +滚动间谍类

要运行作为滚动间谍，监听类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')（替换[选择器]与期望的父元素选择器即div.wrapper）。

0
投票

您可以使用下面的代码在网页中改变形象。

$(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
    }
      });
});
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.