我正在尝试制作一个带有多个粘性部分和水平滚动的页面(因此,当您像平常一样垂直滚动时,您必须通过水平画廊进行滚动)
我参考了这个代码示例 (https://codepen.io/johnhubler/pen/RwoPRBG),因为我的JS知识非常差。 但是,正如您在代码示例中所看到的那样,它只在第一个粘性部分中起作用,而第二个部分则保持不动。
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)";
}
}
我计划添加大约4个相同的固定部分,因此我想知道如何使它在所有这些部分中正常工作。如果有更好的替代资源(如果可能的话是纯JS或非常易于理解的),请告诉我。
谢谢