构建用于交互式讲故事的滚动条的最简约方法？

Question

我正在尝试构建一个静态但响应灵敏的 HTML 讲故事网站。我的目标是实现这样的目标：

左侧为文本，右侧为固定位置的 *.jpg 图片。当用户滚动左侧的文本时，右侧的图像保持固定位置，但在左侧滚动到达某个点后，会通过短暂的过渡更改为另一个 *.jpg 图像。

在这种情况下，响应意味着我完全满意粘性滚动在较小的屏幕上处于非活动状态，并且文本和图像块只是返回到正常的断点行为。

我研究了各种讲故事和滚动 JavaScript 库（Scrollstory、Waypoints 和 InView），以简单、轻量级且容易地实现此目标。所有这些（到目前为止）对于我想做的事情来说似乎完全是过度设计的。

勉强可用的教程和代码片段让我感觉有点像这样：

我没有找到真正的参考资料来告诉我如何从小步骤开始构建滚动条。与图书馆无关。

各个库的参考文件（具有可访问的代码）通常已经过时，并且专注于使用外部数据可视化框架，并且无论出于何种原因都需要加载最多四个其他外部脚本，并且仍然不提供响应功能。

我尝试在这里重建这个展示示例： https: //russellgoldenberg.github.io/scrollama/sticky-side/因为它至少是我想要实现的目标的一半，但我无法让它工作并且我也不明白 JavaScript 的过度使用：https: //jsfiddle.net/gdkupcb6/2/

  <article>
<div class='step' data-step='1'>
  <p>STEP 1</p>
</div>
<div class='step' data-step='2'>
  <p>STEP 2</p>
</div>
<div class='step' data-step='3'>
  <p>STEP 3</p>
</div>
<div class='step' data-step='4'>
  <p>STEP 4</p>
</div>

该代码在 HTML 方面看起来很简单，并且对我来说几乎所有库都有意义，但当涉及到 JavsScript 部分时我完全迷失了。为什么这里需要D3？为什么为了一个简单的滚动改变就需要这么多的 JS 功能？

我是否完全错误地相信有一种极简的方法可以实现如此简单的粘性滚动而不涉及多个不同的外部脚本和库？

有人能给我指出一个好的方向来逐步构建一个滚动器，让我能够理解代码的每个部分，而不是在复杂的外部库和教程的参与下，这些库和教程似乎没有真正的开始也没有结束？

Answer 1

为此，您可以使用 JavaScript - 添加一个 window.addEventListener("wheel") 或 "scroll"，并在您的 "picture".offsetTop 到达正确的滚动位置时监听，并将该元素的位置设置为 "fixed"。此外，您还可以选择添加“慢动作”效果，或者只是尝试图像随页面滚动的方式。

你的 jsFiddle 不适合我，但我喜欢这个想法，所以我在 codepen 上插入了一些 30 行代码---DEMO---出于与此想法类似的目的，它有点笨重，很乐意听取其他人的建议，但它有效。当文本块开始和结束时，Atm 会滚动图像，页面看起来会改变图像（我使用表情符号而不是图像，但想法是相同的）。

它应该在仍然工作的同时自动缩放到您的屏幕尺寸，但它未经测试，所以..:D

var container = document.getElementById("container");
var stickyImage = document.getElementById("stickyImage");
var tempY;
window.addEventListener("scroll", (e) => {
//watch how image moves with scrolleing
    if(window.pageYOffset >= container.offsetTop && window.pageYOffset <= container.offsetTop+container.offsetHeight  - window.innerHeight ){
        console.log("slinding");
        stickyImage.style.position = "fixed";
        stickyImage.style.top = "0vh";
        stickyImage.style.marginTop = "";
        tempY = window.pageYOffset;
    }else if(window.pageYOffset <= container.offsetTop){
        console.log("top sxcreen");
        stickyImage.style.position = "absolute";
        stickyImage.style.top = "";
        stickyImage.style.marginTop = "";       
    }else{
        console.log("stop");
        stickyImage.style.position = "absolute";
        stickyImage.style.marginTop = tempY + "px";         
    }
//change images while scroll
    if(window.pageYOffset < document.getElementById("change1").offsetTop){
        stickyImage.textContent = "";
    }
    if(window.pageYOffset > document.getElementById("change1").offsetTop){
        stickyImage.textContent = "";
    }
    if(window.pageYOffset > document.getElementById("change2").offsetTop){
        stickyImage.textContent = "";
    }   
})