Javascript 将图像转移到滚动的另一个div中；

我的问题是：

我在一个div中有一个图像，它位于该div的中心。 我希望该图像在用户滚动一次（滚动>50）后进入标题

这是我的名片

HTML:

---

有很多方法可以做到这一点，但实现这一点的快速方法是复制图像，以便在

主

和

标题中有一个副本。装载时，将其隐藏在导航内。然后，让一个滚动事件侦听器监视偏移量
>50

如果
true
，=>隐藏主图像并显示导航图像
如果
false
=>显示主图像。并隐藏导航图像

同样值得注意的是，我将
main
的
高度更新为
200vh
——只是为了模拟内容。这与答案无关


$（函数（）{
$（窗口）.bind（'scroll'，function（）{
如果（$（窗口）.scrollTop（）>=50）{
$（“#主img”）.hide（）；
$（“标题img”）.show（）；
}否则{
$（“#主img”）.show（）；
$（“标题img”）.hide（）；
}
});
});
*{
填充：0；
保证金：0；
溢出x：隐藏；
}
#导航{
浮动：对；
线高：70px；
}
标题{
宽度：100%；
位置：固定；
左：10%；
右：10%；
背景：#fff；
高度：70像素；
}
收割台img{
显示：无；
宽度：50px；
保证金：0自动；
}
#主要{
填充顶部：100px；
文本对齐：居中；
高度：200vh；
背景#3cb5f9；
}
#主img{
宽度：200px；
保证金：0自动；
}

链接

<header> <div id="nav"> LINK LINK LINK </div> </header>

<div id="main">
  <img src="https://img.clipartfest.com/3c73a51504b9b1ee6d200d1e60725b79_triangle-quilatral-triangle-shape-clipart-no-background_2400-2080.png">
</div>

*{
  padding:0;
  margin:0;
  overflow-x:hidden;
}

#nav{float:right; line-height:70px;}

header{
  width:100%;
  position:fixed;
  padding-left:10%;
  padding-right:10%;
  background:#fff;
  height:70px;
}

#main{
  padding-top:100px;
  text-align:center;
  height:800px;
  background:#3cb5f9;}
#main img{width:200px; margin:0 auto;}