Javascript 如何淡出滚动条上的Gtranslate WP插件语言选择按钮

当你向下滚动网页时，我想从网页顶部淡出名为“切换器”的Gtranslate WP插件语言选择按钮

以下是插件的主要代码：

jQuery（'.switcher.selected'）。单击（函数（）{jQuery（'.switcher.option a img'）。每个（函数（）{if（！jQuery（this）[0].hasAttribute（'src'））jQuery（this）.attr（'src'，jQuery（this.attr（'data-gt-lazy-src'））））；if（！（jQuery（'.switcher.option'）。是（':visible'））{jQuery（'.switcher.option'））。stop（'true，true'））。stop（true，true）。延迟（100）。edown（500）；jQuery（'.switcher.selected a'）.toggleClass（'open'）}）；
jQuery（'.switcher.option'）.bind（'mousewheel'，函数（e）{var options=jQuery（'.switcher.option'）；if（options.is（':visible'））options.scrollTop（options.scrollTop（）-e.originalEvent.wheelDelta）；返回false；}）；
jQuery（'body'）。而不是（'.switcher'）。单击（函数（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'））}）；
#goog gt tt{
显示：无！重要；
}
.goog te横幅框架{
显示：无！重要；
}
.goog te菜单值：悬停{
文字装饰：无！重要；
}
.goog文本突出显示{
背景色：透明！重要；
盒影：无！重要；
}
身体{
顶部：0！重要；
}
#谷歌翻译元素2{
显示：无！重要；
}
函数GoogleTranslateElement2（）{new google.translate.TranslateElement（{pageLanguage:'en'，autoDisplay:false}，'google_translate_element2'）；}

为了实现这一点，我尝试使用以下脚本在你向下滚动页面时淡出语言选择按钮（“切换器”），但我需要你的帮助使其工作。他想要这种效果，因为当你在手机上向下滚动页面时，按钮与其他内容重叠

$（窗口）。滚动（函数（）{
如果（$（this）.scrollTop（）>0）{
$（'.switcher'）.fadeOut（）；
}否则{
$（'.switcher'）.fadeIn（）；
}
});

您可以使用

类

名称，让CSS完成淡出的工作

• 考虑

  opacity

  ，因为您可以在其上使用

  transition

  来衰减值
• 还有

  指针事件

  ，以防止不可见时出现不必要的点击

您可以从

window.innerHeight

视口高度和

window.scrollY

到顶部的滚动距离中获取值，并对其进行比较，以便知道何时应用更改（即：在主图像/屏幕上方显示切换器，然后将其隐藏）

即：

let开关；
window.addEventListener（“加载”，（）=>{
切换器=document.getElementById（'switcher'）；
window.addEventListener（“滚动”，e=>{
//如果我们位于主图像下方：
if（window.scrollY>window.innerHeight）{
//如果尚未添加，请添加“隐藏”类。
如果（！switcher.classList.contains（'hidden'））{
switcher.classList.add（'hidden'）；
}
//其他（我们正在浏览主页图像）：
//如果“隐藏”类仍在此处，请将其删除。
}else if（switcher.classList.contains（'hidden'））{
switcher.classList.remove（'hidden'）；
}
});
})；

正文{
高度：300vh；
位置：相对位置；
}
/*一个div仅仅是为了可视化家庭图像*/
.家庭形象{
背景色：淡蓝色；
高度：100vh；
}
#切换器{
不透明度：1；
位置：固定；
右：0；
排名：0；
过渡：不透明度200ms；
}
#切换器隐藏{
不透明度：0；
指针事件：无；
}
/*忽略下面的代码*/
* {
保证金：0；
字体大小：24px；
}

“交换机”

像这样使用mCustomScrollbar Js或平滑滚动Js

下面复制链接代码，并在看到这是工作后放入您的代码中

---

非常感谢。我已经有了“切换器”向下滚动页面时淡入淡出。只有一个问题：淡入淡出时的距离如何输入？

窗口。innerHeight

为您制作。但您可以硬编码。假设您想在滚动半屏时淡入淡出，请执行

窗口。innerHeight/2

，例如，或使用固定数字笔直。使用

赢取dow.innerHeight

您可以确保交换机仅在登录页/屏幕上可见（时钟倒转的人）。在下面，它将淡出。再次感谢您，Leo。我将在工作中了解更多信息。