我想淡出Gtranslate WP插件语言选择按钮，称为"切换器"，";当你向下滚动网页时，从网页顶部开始。
下面是插件的主代码:
<div class="switcher notranslate">
<div class="selected">
<a href="#" onclick="return false;"><img
src="//itsabouttime.gallery/wp/wp-content/plugins/gtranslate/flags/32/en-us.png" height="32" width="32"
alt="en" /> English</a>
</div>
<div class="option">
<a href="#"
onclick="doGTranslate('en|en');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;"
title="English" class="nturl selected"><img
data-gt-lazy-src="//itsabouttime.gallery/wp/wp-content/plugins/gtranslate/flags/32/en-us.png" height="32"
width="32" alt="en" /> English</a><a href="#"
onclick="doGTranslate('en|fr');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;"
title="Français" class="nturl"><img
data-gt-lazy-src="//itsabouttime.gallery/wp/wp-content/plugins/gtranslate/flags/32/fr.png" height="32"
width="32" alt="fr" /> Français</a>
</div>
</div>
<script>
jQuery('.switcher .selected').click(function () { jQuery('.switcher .option a img').each(function () { if (!jQuery(this)[0].hasAttribute('src')) jQuery(this).attr('src', jQuery(this).attr('data-gt-lazy-src')) }); if (!(jQuery('.switcher .option').is(':visible'))) { jQuery('.switcher .option').stop(true, true).delay(100).slideDown(500); jQuery('.switcher .selected a').toggleClass('open') } });
jQuery('.switcher .option').bind('mousewheel', function (e) { var options = jQuery('.switcher .option'); if (options.is(':visible')) options.scrollTop(options.scrollTop() - e.originalEvent.wheelDelta); return false; });
jQuery('body').not('.switcher').click(function (e) { if (jQuery('.switcher .option').is(':visible') && e.target != jQuery('.switcher .option').get(0)) { jQuery('.switcher .option').stop(true, true).delay(100).slideUp(500); jQuery('.switcher .selected a').toggleClass('open') } });
</script>
<style>
#goog-gt-tt {
display: none !important;
}
.goog-te-banner-frame {
display: none !important;
}
.goog-te-menu-value:hover {
text-decoration: none !important;
}
.goog-text-highlight {
background-color: transparent !important;
box-shadow: none !important;
}
body {
top: 0 !important;
}
#google_translate_element2 {
display: none !important;
}
</style>
<div id="google_translate_element2"></div>
<script>
function googleTranslateElementInit2() { new google.translate.TranslateElement({ pageLanguage: 'en', autoDisplay: false }, 'google_translate_element2'); }
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit2"></script>
要做到这一点，我试图使用以下脚本来淡出语言选择按钮("切换器")当你向下滚动页面，但我需要你的帮助，使其在这个客户端的网站上工作。他想要这种效果，因为当你在手机上向下滚动页面时，按钮会与其他内容重叠。
<script>
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
$('.switcher').fadeOut();
} else {
$('.switcher').fadeIn();
}
});
</script>
您可以使用class名称，并让CSS完成褪色的工作。
- 考虑
opacity，因为您可以使用transition对其褪色值。 - 也
pointer-events防止不必要的点击，而不可见。
你可以从window.innerHeight的视口高度，和window.scrollY滚动到顶部的距离，并比较它们，所以你知道什么时候应用更改(即:显示切换器只是在主图像/屏幕，然后隐藏它)。
即:
let switcher;
window.addEventListener("load", () => {
switcher = document.getElementById('switcher');
window.addEventListener("scroll", e => {
// If we are below the home image:
if (window.scrollY > window.innerHeight) {
// Add the 'hidden' class if not added yet.
if (!switcher.classList.contains('hidden')) {
switcher.classList.add('hidden');
}
// Else (we are over the home image):
// Remove the 'hidden' class if it is still here.
} else if (switcher.classList.contains('hidden')) {
switcher.classList.remove('hidden');
}
});
});body {
height: 300vh;
position: relative;
}
/* A div just to visualize the home image*/
.home-image {
background-color: dodgerblue;
height: 100vh;
}
#switcher {
opacity: 1;
position: fixed;
right: 0;
top: 0;
transition: opacity 200ms ease;
}
#switcher.hidden {
opacity: 0;
pointer-events: none;
}
/* Ignore code below. */
* {
margin: 0;
font-size: 24px;
}<body>
<div class="home-image"></div>
<button id="switcher">"Switcher"</button>
</body>像这样使用mCustomScrollbar Js或平滑滚动Js
下面复制链接代码并放入你的代码后看到这是工作
https://essesstile.com/wp-includes/js/SmoothScroll.min.js