在Alpine js中滑动后更改固定菜单中的图像

Question

我想在向下滚动时更改固定菜单栏中图像的src图片(或者使用其他技术？(。

这是我的html:

<header>
<a href="/">
<img src="img1.jpg" width="200px" height="100px">
</a>
</header>
<main>
...

收割台已固定。因此，在滚动过程中，它始终保持在页面顶部。

现在，我想在开始滚动时进行转换(如果Alpine的x-show.transition或CSS的transition可以的话？(。

因此，当我开始滚动时，图像开始变小到新的图像维度，然后被淡出和淡入替换为具有新维度width="150px"和height="80px"的新图像img2.jpg。

如何在纯阿尔卑斯js中做到这一点？

Answer 1

我对Alpine JS没有任何经验，所以我用CSS和标准JS解决了这个问题。

首先给img对象一个id，然后将下面的样式添加到对象中。

#img {
transition: .5s;
}

我使用了一个滚动监听器并检查了滚动值。

const elem = document.getElementById("img");
window.onscroll = function() {
if(window.scrollY>=40){
//user scrolled to the top of the page
elem.style.height = "80px";
elem.style.width = "150px";
} else {
//user scrolled to the top of the page
elem.style.height = "100px";
elem.style.width = "200px";
}
};