Javascript 在媒体查询中滚动到底部时如何更改元素的不透明度

我只是想问问。当我向下滚动到页面底部时，我想让shopify中的产品图像缩略图消失，我想用它进行一点过渡。。我真的不知道怎么做

这是我的密码。。

---

提前非常感谢

正确的document方法是

document.getElementsByClassName

，因为它返回一个数组，所以您需要它的第一个元素，所以请更改以下内容：

document.getElementByClass("product-single__thumbnails").style.transition = "0.65s";
document.getElementByClass("product-single__thumbnails").style.opacity = 0;

致：

---

您可以阅读有关该方法的更多信息

您应该使用GetElementsByClass代替getElementByClass（这不是正确的函数） 这将返回一个类似数组的结构，所以若页面上只有一个类可用，则需要传递0索引

或者您可以尝试查询选择器（“.product-single\uu缩略图”）

对于transition，您可以在.product-single_u缩略图中定义它，比如：transition:opacity.65s linear-在此处使用要设置动画的属性

函数myFunction（屏幕宽度）{
if（screenWidth.matches）{//if媒体查询匹配
window.onscroll=函数（ev）{
if（（window.innerHeight+window.scrollY）>=document.body.offsetHeight）{
document.getElementsByClassName（“product-single\u缩略图”）[0]。style.opacity=0；
}
};
}
}
让screenWidth=window.matchMedia（“（最小宽度：350px）”）；
myFunction（屏幕宽度）；//在运行时调用侦听器函数
screenWidth.addListener（myFunction）

正文{
保证金：0；
高度：1000px；
}
.产品-单个缩略图{
背景色：红色；
颜色：白色；
宽度：50px；
高度：50px；
位置：固定；
过渡：不透明度.65s线性；
边界半径：4px；
利润率：20px；
文本对齐：居中；
}

红色的

也感谢您的建议。我要试试看！是的，谢谢你提醒我关于转换的事情，把它放到类的css中，而不是js中。：）是 啊我添加了一个else部分，并将不透明度设为1，以便在每次向上滚动时再次显示产品图像缩略图，效果非常好！！！再次感谢：D

document.getElementByClass("product-single__thumbnails").style.transition = "0.65s";
document.getElementByClass("product-single__thumbnails").style.opacity = 0;

document.getElementsByClassName("product-single__thumbnails")[0].style.transition = "0.65s";
document.getElementsByClassName("product-single__thumbnails")[0].style.opacity = 0;