Jquery 根据div位置对导航项目进行颜色填充

我在左栏第1-10节中有10个导航项目，与右栏中的10个div部分相关

我想做的是根据我通过每个部分的距离，从左到右用颜色填充每个导航项目的背景颜色

所以我已经完成了第1部分的一半，占了50%。一旦我滚动到第2节，导航项开始填充等

---

关于如何实现这一点，您有什么想法吗？

如果您将scrollTop JQuery方法与特定部分的高度进行比较，那么您可以确定它通过一个部分的距离：

var percentage = $("nav").scrollTop() / $("#section1").height() * 100;

---

对于每个后续部分，它需要将[滚动减去所有先前部分的高度]与当前部分的高度进行比较。

很有趣……那么您使用渐变作为进度指示器？使用我提到的计算得到百分比后，您可以将该百分比用于第一种颜色，但不需要指定第二种颜色的百分比，因为它只会占用其余的颜色…如下所示：

$("nav").css({"background": "linear-gradient(to right, #A1C866 " + percentage + "%, #EDEDED)"});

---

然后，它只显示用户在当前分区中滚动了多远的指示器。

此外，通过向每个分区提供所有ID（如我的示例中的section1、section2等），获取每个分区的高度是最简单的。然后，您可以使用jquery获取每个高度：

$("#section1").height() + $("#section2").height() ...

---

你甚至可以使用一个循环遍历它们，直到它超过当前的scrollTop，然后你就会知道当前正在查看哪一个。

到目前为止你尝试过什么吗？我整天都在尝试使用ScrollMagic和通用jQuery scroll offset的组合来解决这个问题，但我无法让它在每个div的滚动基础上工作。我可以基于scroll在导航项上触发一个类，但这会填满整个栏。例如，当我需要根据分区div滚动的高度填充时。啊，这是一种工作方式，但假设我的导航li是209px宽。如何将该百分比的读取应用于导航项目的背景像素位置？背景：向右线性梯度，A1C866 49%，A1C866 49%，EDED49%；举个例子，你有没有一个例子来说明我是如何减号的，或者是如何做后续的每一部分？我似乎不知道如何减去并得到任何其他部分的正确值。