Estoy tratando de crear una página con varias secciones adhesivas con desplazamiento horizontal (por lo que cuando se desplaza verticalmente como de costumbre, se ve obligado a pasar por la galería horizontal)
Hago referencia a este codepen ( https://codepen.io/johnhubler/pen/RwoPRBG ) ya que mi conocimiento de JS es muy bajo. Pero, como puede ver en el codepen, solo funciona en la primera sección pegajosa, y la segunda permanece quieta.
var windowWidth = window.innerWidth; var horLength = document.querySelector(".element-wrapper").scrollWidth; var horLength2 = document.querySelector(".element-wrapper2").scrollWidth; var distFromTop = document.querySelector(".horizontal-section").offsetTop; var distFromTop2 = document.querySelector(".horizontal-section2").offsetTop; var scrollDistance = distFromTop + horLength - windowWidth; var scrollDistance2 = distFromTop2 + horLength2 - windowWidth; document.querySelector(".horizontal-section").style.height = horLength + "px"; document.querySelector(".horizontal-section2").style.height = horLength2 + "px"; window.onscroll = function(){ var scrollTop = window.pageYOffset; if (scrollTop >= distFromTop && scrollTop <= scrollDistance) { document.querySelector(".element-wrapper").style.transform = "translateX(-"+(scrollTop - distFromTop)+"px)"; } if (scrollTop >= distFromTop2 && scrollTop <= scrollDistance2) { document.querySelector(".element-wrapper2").style.transform = "translateX(-"+(scrollTop - distFromTop2)+"px)"; } }Planeo agregar alrededor de 4 de las mismas secciones adhesivas, así que me gustaría saber cómo hacer que funcione en todas ellas. Si hay una mejor alternativa/recurso/etc. (si es posible, Vanilla JS o algo muy fácil de seguir), házmelo saber.
Gracias
Hice una versión optimizada y funcional de su código.
Esta matriz enumera las clases de elementos de empaquetado. De esta manera, puede agregar tantas galerías como desee simplemente agregando una nueva clase a la matriz.
var array = ['.horizontal-section', '.horizontal-section2'];Ejemplo:
var array = ['.horizontal-section', '.horizontal-section2']; window.onscroll = function () { var windowWidth = window.innerWidth; var scrollTop = window.pageYOffset; array.forEach(el => { var wrap = document.querySelector(el); var elWrap = wrap.querySelector(".element-wrapper"); var horLength = elWrap.scrollWidth; var distFromTop = wrap.offsetTop; var scrollDistance = distFromTop + horLength - windowWidth; wrap.style.height = horLength + "px"; if (scrollTop >= distFromTop && scrollTop <= scrollDistance) { elWrap.style.transform = "translateX(-" + (scrollTop - distFromTop) + "px)"; } }); } * { box-sizing: border-box; } body { padding: 0; margin: 0; } .bumper { width: 100%; height: 1800px; background-color: #f3f3f3; } .horizontal-section, .horizontal-section2 { padding: 100px 0; background-color: pink; } .sticky-wrapper, .sticky-wrapper2 { position: sticky; top: 100px; width: 100%; overflow: hidden; } .element-wrapper, .element-wrapper2 { position: relative; display: flex; } .element { width: 500px; height: 400px; background-color: purple; margin: 0 20px 0 0; flex-shrink: 0; } <div class="bumper"></div> <div class="horizontal-section"> <div class="sticky-wrapper"> <div class="element-wrapper"> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> </div> </div> </div> <div class="bumper"></div> <div class="horizontal-section2"> <div class="sticky-wrapper"> <div class="element-wrapper"> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> </div> </div> </div> <div class="bumper"></div>