JSFiddle - React, Tailwind, and code Playground

by blonfu

HTML

<div id="contenedor">
  <button id="borra">
    borra localStorage
  </button>

  <div id="caja">
  <h2>
  BoletĂ­n
  </h2>
    <form id="boletin" action="#" method="get">
      <input type="email" name="" id="" required>
      <input type="submit" value="Enviar" id="envia">
    </form>
  </div>

</div>

CSS

#contenedor {
  height: 900px;
}
h2{
  margin:0;
}
#caja {
  padding: 10px;
  background-color: #eee;
  position: fixed;
  top: 200px;
  right: 0;
  border: solid 1px red;
  transform: translateX(100%);
  transition: all .5s ease;
}

#caja.entra {
  transform: translateX(0);
}

JavaScript

$(function() {
  if (localStorage.getItem("email")) {
    $("#caja").removeClass("entra");
  } else {
    $(window).scroll(function() {
      if (!localStorage.getItem("email"))
        var scroll = $(window).scrollTop();
      if (scroll >= 50) {
        $("#caja").addClass("entra");
      } else {
        $("#caja").removeClass("entra");
      }
    });
    }

  $("#boletin").submit(function(event) {
    localStorage.setItem("email", "true");
    if (localStorage.getItem("email")) {
      $("#caja").removeClass("entra");
    }
  });
  $("#borra")
  localStorage.removeItem('email');
});