Javascript：如何更改滚动条上div内的图像？

因此，我正在尝试创建在本网站上看到的效果（针对专栏左侧的照片）：

我想能够改变一个div内滚动的图像。 最好是，在所有图像都被滚动浏览之前，它不会向下滚动页面

我正在尝试在添加jQuery之类的东西之前掌握javascript的诀窍，那么有人可以使用pureJS来帮助我吗`

window.onscroll=function（）{
console.log（window.pageYOffset）；
var img1=document.getElementById（'img1'）；
var img2=document.getElemebtById（'img2'）
如果（window.pageYOffset>1000）{
img1.classList.add（“隐藏”）；
img2.classList.remove（“隐藏”）；
}否则{
img2.classList.add（“隐藏”）；
img1.classList.remove（“隐藏”）；
}
}

.rightPhotos{
最大宽度：50%；
身高：50%；
溢出：自动；
}
阿佛托先生{
最大高度：100%；
}
.隐藏{
可见性：隐藏；
}
.图像{
宽度：100%；
身高：100%；
}

---

参见下面的代码：

（我设置了60而不是1000（在功能中）以查看更改）

我使用one

image

和

onscroll

更改image的

src

window.onscroll=function（）{
var img1=document.getElementById（'img1'）；
var img2=document.getElementById（'img2'）
如果（window.pageYOffset>60）{
document.getElementById（“img1”）.src=”https://material.angular.io/assets/img/examples/shiba2.jpg";
}否则{
document.getElementById（“img1”）.src=”https://material.angular.io/assets/img/examples/shiba1.jpg";
}
}

.rightPhotos
{
最大宽度：50%；
身高：50%；
溢出：自动；
}
阿佛托先生
{
最大高度：100%；
}
.图像
{
宽度：100%；
高度：500px；
}

---

您可以使用CSS属性来显示/隐藏元素；而不是使用带有隐藏类的自定义CSS

if ( window.pageYOffset > 1000 ) {
        img1.style.visibility = 'hidden';  
        img2.style.visibility = 'visible';  
    } else {
        img2.style.visibility = 'hidden';  
        img1.style.visibility = 'visible';  
}

上面的代码会隐藏元素，但是DOM元素仍然会占用空间

让它现在有空间被占用（喜欢移除它）

//window.pageYOffset
var scrollingDiv=document.getElementById（'scrollContainer'）；
var img1=document.getElementById（'img1'）；
var img2=document.getElementById（'img2'）；
scrollingDiv.onscroll=函数（事件）{
如果（scrollingDiv.scrollTop<500）{
img1.src=”https://placeimg.com/250/100/arch";
img2.src=”https://placeimg.com/250/100/animals";
}
如果（scrollingDiv.scrollTop>500）{
img1.src=”https://placeimg.com/250/100/nature";
img2.src=”https://placeimg.com/250/100/people";
}
如果（scrollingDiv.scrollTop>1000）{
img1.src=”https://placeimg.com/250/100/tech";
img2.src=”https://placeimg.com/250/100/any";
}
}

.container{
显示：表格；
宽度：100%；
身高：100%；
}
身体{
保证金：0；
}
.container>div{
垂直对齐：顶部；
}
.左、.中、.右{
显示：表格单元格；
高度：100vh；
框大小：边框框；
}
.左，.右{
宽度：40%；
背景：灰色；
}
.中{
溢出：自动；
位置：相对位置；
}
.在中间{
背景：番茄；
位置：绝对位置；
宽度：100%；
身高：100%；
框大小：边框框；
保证金：0；
}
.在中间{
高度：500px；
背景：番茄；
}
.中间：第n个孩子（2）{
背景：粉红色；
}
.中间：第n个孩子（3）{
背景：天蓝色；
}
.左img{
宽度：100%；
过渡：均为0.5s；
}

---

您链接的页面实际上看起来非常漂亮，因此我花了一些时间制作了一个比其他答案更接近它的页面

• 我添加了一个正常工作的过渡，类似于franshalsmuseum.nl上的过渡
• 我对页面进行了样式设计，以相对较好地处理调整大小的问题：
  • 窗格和图像的大小都是相关的
  • 滚动步数与页面高度有关
  • 使用带有背景图像的
    而不是
    标记来显示图像。根据窗口的大小，它们会稍微被裁剪以适应视口纵横比的变化
• 我使图像集的数量非常容易更改。可以通过在Javascript中创建html元素来改进它，但这看起来没有必要。至少，它不会是原来的页面

工作原理 HTML

图像被放入特殊的信封元素（

.img wrapper

）中，这些元素提供适当的大小和位置

位置：相对的
很重要）。每个图像元素获取url（作为背景图像url）和javascript使用的图像集编号：

<div class="img visible" data-imageset="1"
    style="background-image: url('http://placeimg.com/640/480/people');">
</div>

JS

Javascript代码非常简单，与DOM的交互实际上只有一行。但是，它使用了一些可能不明显的技巧，因此有一行带有一些文档链接：

文档
（'#left pane.img'）
（
（img）
{

img
。（
'visible'
，
img
。
imageset
{
img.classList.toggle（'visible'，img.dataset.imageset告诉我更多帮助Hi！我想知道是否可以挂起它，以便图像在用户滚动时发生变化，但是在所有图片旋转/显示之前，页面实际上不会移过该div？@sGlow如果问题是图像加载缓慢，则需要预加载它们。或者让它们加载在CSS中有一个
.hidden
类比什么更好呢？同样的，但是在CSS中有一个
.hidden
类
<div class="img visible" data-imageset="1"
    style="background-image: url('http://placeimg.com/640/480/people');">
</div>

/* hiding images in #top-image */
#left-pane #top-image .img {
  top: 100%;
}
#left-pane #top-image .img.visible {
  top: 0;
}