在滚动时将图像传输到另一个div;

Question

这是我的问题：

我在一个以div为中心的div中有图像。 我想在用户滚动一次之后将该图像放入标题中（滚动＆gt; 50）。

这是我的codepen example。

HTML：

python manage.py collectstatic

CSS：

<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>

Answer 1

有很多方法可以做到这一点，但实现这一目标的一种快捷方法是复制图像，以便在main和header中复制图像。加载时，将其隐藏在导航中。然后，让一个滚动事件监听器监视>50的偏移量。

如果true，=＆gt;隐藏主图像，并显示导航图像 如果false =＆gt;显示主要图像。并隐藏导航图像。

另外值得注意的是，我将height的{​​{1}}更新为main - 只是为了模拟内容。这与答案无关。

＆＃13;

＆＃13;

200vh

＆＃13;

$(function(){
 
 $(window).bind('scroll', function(){
   
   if($(window).scrollTop() >= 50){
     $("#main img").hide();
     $("header img").show();
   }else{
     $("#main img").show();
     $("header img").hide();
   }
   
 });
  
 
});

＆＃13;

* {
  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;
}

header img {
  display: none;
  width: 50px;
  margin: 0 auto;
}

#main {
  padding-top: 100px;
  text-align: center;
  height: 200vh;
  background: #3cb5f9;
}

#main img {
  width: 200px;
  margin: 0 auto;
}

＆＃13;

＆＃13;

＆＃13;

外部掠夺者：http://plnkr.co/edit/yS5MdtCeTNJvvn7w5gvl?p=preview