小编Chr*_*ean的帖子

我正在尝试构建一个静态但响应灵敏的 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 功能？

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

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

使用 webfont，我想使用CSS 中的font-feature-settings:选项以及HTML 中的span 类，以便使用字体集中的特定替代字形。

我需要以正确的语法使用哪些值（GID、Unicode？）才能glyph在glyph替代方案中定位特定值？