javascript – Cambiar la posición del título en el desplazamiento

Question

2 visitas3 días antes

0

TylerH 0 3 días antes 0 comentarios

Hay algunas formas de lograrlo, dado que no está compartiendo ningún código, es difícil explicar algo mejor, puede escuchar los cambios en el fondo donde está el desplazamiento y, según ese número, actualice la posición de su título, lo haré. te dejo aquí un ejemplo simple que puedes probar por tu cuenta para ver lo que quiero decir

Si hay algo que no entienda no dude en preguntar o discutir acerca de

HTML

 <div id="box">
  <div id="box-to-force-scroll">
    <div id="title"> title </div>
  </div>
</div>

CSS

#box {
  width:100px;
  height:100px;
  background-color:blue;
  overflow:auto;
}

#box-to-force-scroll {
  width:100px;
  height:1000px;
}


#title {
  font-size:20px;
  position:absolute;
  top:10px;
  left:10px;
  color:white;
  text-transform:uppercase;
}

JS

document.getElementById('box').addEventListener('scroll', function(el) { 
  // random math just to show it moving
  let scrollTop = el.target.scrollTop
  let newVal = 10 + ( parseInt(scrollTop, 10) / 3)

  document.getElementById('title').style.top = `${newVal}px`
})

.