mostrar información con scroll code example

Example 1: mostrar información con scroll

#contenedor {
  height: 900px;
}

#caja {
  width: 350px;
  position: fixed;
  padding: 20px;
  max-width: 400px;
  top: 200px;
  right: 0;
  border: solid 1px red;
  transform: translateX(100%);
  transition: all .5s ease;
  -webkit-box-shadow: 0 2px 10px rgba(125,125,125,.2);
  -moz-box-shadow: 0 2px 10px rgba(125,125,125,.2);
  box-shadow: 0 2px 10px rgba(125,125,125,.2);
  border: 1px solid #BBB;
  border: 1px solid rgba(125,125,125,.2);
  border-radius: 5px;
}

#caja .x {
    position: absolute;
    right: 13px;
    top: 9px;
    font-size: 14px;
    color: #222;
}

#caja h1 {
    font-size: 32px;
    color: #333;
    margin: 0;
    text-align: left;
}

#caja h1 i {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAXBAMAAACL/BAmAAAABGdBT…h0HuBDUqW+u6yjq+oFEfpAw+p5bL9nzB/zCv+7oz+3+QnbNC75apKiLQAAAABJRU5ErkJggg==);
    height: 23px;
    width: 40px;
    display: inline-block;
    margin-left: 3px;
}

#caja p {
    font-size: 16px;
    line-height: 20px;
    margin: 14px 0 18px 0;
    padding: 0;
}

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

Example 2: mostrar información con scroll

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