这是不寻常的,但我有一位客户,谁愿意来改变滚动的主要标志。在顶部的一个标志,在滚动第二标志。
我已设法通过使用图像,然后滚动隐藏的形象和使用::伪类之前(第二个标志是基于文本)实施标志通过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;
}
答案演示了如何完成从有机磷农药的需求期望的最终结果:
我要么需要更改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
)。
您可以使用下面的代码在网页中改变形象。
$(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
}
});
});