mostrar información con scroll

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

#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);
}

Posted by: Guest on April-23-2021

Source

Code answers related to "mostrar información con scroll"

Code answers related to "Whatever"

Browse Popular Code Answers by Language

Answers for "mostrar información con scroll"

Code answers related to "mostrar información con scroll"

Code answers related to "Whatever"

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us