Subscribe onscroll

by kompiajaib

HTML

<button onclick="eraseCookie('hideDialog');">Hapus Kuki FB</button>
<button onclick="eraseCookie('hideDialog2');">Hapus Kuki Subscribe</button>
<script>
  var appended = false,
    bookmark = document.createElement("div");
  bookmark.id = "fbOnscroll";
  bookmark.innerHTML = '<div id="fbbox-wrapper"><div class="fbbox-wrapper zoomInUp">\
  <iframe name="f13bea94f064144" width="1000px" height="1000px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" title="fb:page Facebook Social Plugin" src="https://www.facebook.com/v2.7/plugins/page.php?adapt_container_width=true&amp;app_id=113869198637480&amp;channel=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2FuN4_cXtJDGb.js%3Fversion%3D42%23cb%3Df19b772d4d20444%26domain%3Ddevelopers.facebook.com%26origin%3Dhttps%253A%252F%252Fdevelopers.facebook.com%252Ff1ba7fe51c4d354%26relation%3Dparent.parent&amp;container_width=613&amp;hide_cover=false&amp;href=https%3A%2F%2Fwww.facebook.com%2Fkompiajaib&amp;locale=en_US&amp;sdk=joey&amp;show_facepile=true&amp;small_header=false" style="border: none; visibility: visible; width: 340px; height: 214px;" class=""></iframe>\
<div class="close-fbcookie" onclick="hidefbbox()"><span>&#215;</span> Don\'t Show Again</div>\
<div class="close-fbbox" onclick="hidefb()">&#215;</div>\
              </div>\
              <div class="layer fadeIn"></div></div>\
              <div id="site-subs" class="slideInUp">\
  <div id="mc_embed_signup">\
    <form action="//kompiajaib.us11.list-manage.com/subscribe/post?u=c592732e727cadd0c18aa2e53&amp;id=67606d3fc9" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>\
      <div id="mc_embed_signup_scroll">\
        <label for="mce-EMAIL">SUBSCRIBE <span class="to">to</span> <span class="our">Our News Letters</span><br/>\
        <span class="get">Get hottest posts into your inbox</span></label>\
        <input type="email" value="" name="EMAIL"...

CSS

body {
  height: 8000px
}

.fbbox-wrapper {
  width: 360px;
  position: fixed;
  left: 50%;
  margin-left: -180px;
  top: 50%;
  margin-top: -131px;
  height: auto;
  background-color: #fff;
  -webkit-box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.25);
  padding: 10px;
  border: 1px solid #dedede;
  border-radius: 5px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 1000000
}

.close-fbbox {
  position: absolute;
  top: -15px;
  right: -15px;
  font-family: Arial;
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
  width: 25px;
  color: #555;
  height: 25px;
  line-height: 25px;
  text-align: center;
  background: #fff;
  border: 1px solid #dedede;
  border-radius: 100%;
  transition: all .4s ease-in-out
}

.close-fbcookie {
  background: #fff;
  transition: all .4s ease-in-out;
  padding: 1px 5px;
  border: 1px solid #dedede;
  border-radius: 2px;
  font: 11px Arial;
  color: #555;
  display: inline;
  float: left;
  line-height: 1;
  cursor: pointer;
}

.close-fbcookie span {
  font-size: 18px;
  font-weight: bold;
  vertical-align: middle
}

.close-fbbox:hover,
.close-fbcookie:hover {
  background: #ddd;
  border: 1px solid #ccc
}

.layer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, .3);
  z-index: 999999;
}

.zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes zoomInUp {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675,...