Insert image in divs with scroll

 $(window).scroll(function() {
    var box = $('.box');
    var scroll = $(window).scrollTop();
    if (scroll > 100) {
      box.removeClass('box-NotScrolled');



      box.addClass('boxScrolled');
    } else {
      if (box.hasClass('boxScrolled')) {
        box.removeClass('boxScrolled');



        var elem = document.createElement("img");
					elem.setAttribute("src", "https://ae01.alicdn.com/kf/HTB1WHl8IVXXXXa6XpXXq6xXFXXXr/Teclado-del-ordenador-port%C3%A1til-cubre-el-Color-transflectiva-Color-pel%C3%ADcula-protectora-para-macbook-11-teclado-teclas.jpg");
					elem.setAttribute("height", "168");
					elem.setAttribute("width", "124");
					elem.setAttribute("alt", "Flower");
					document.getElementsByClassName("box")[0].appendChild(elem);

        box.addClass('box-NotScrolled');
      }
    }
  });

.box {
  position: fixed;
  top: 5%;
  left: 5%;
  width: 200px;
  height: 200px;
  background-color: red;
}
.boxScrolled {
  background-color: green;
}
.box-NotScrolled {
  background-color: red;
}

<div class="box"></div>
<div style="height: 1000px">

<img src="https://images7.alphacoders.com/413/413380.jpg" alt="Smiley face" height="42" width="42" style="z-index:1000"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>