基于 div 位置的颜色填充导航项答案

【问题标题】：Colour fill nav items based on div position基于 div 位置的颜色填充导航项
【发布时间】：2018-06-20 19:36:18
【问题描述】：

我在左列（第 1-10 节）中有 10 个导航项，它们与右列中的 10 个 div 部分相关。

我想要做的是根据我在每个部分的距离来填充每个导航项的背景颜色（从左到右的颜色）。

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

关于如何让它发挥作用的任何想法？

【问题讨论】：

到目前为止你有没有尝试过？
我整天都在尝试结合使用 ScrollMagic 和一般的 jQuery 滚动偏移来解决这个问题，但我无法让它在每个 div 滚动的基础上工作。我可以基于滚动触发导航项目上的一个类，但它会填满整个栏。当我需要它根据部分 div 滚动的高度来填充时。

【解决方案1】：

如果你将 JQuery 的 scrollTop() 方法与特定部分的高度进行比较，那么你可以通过一个来确定它有多远：

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

对于每个后续部分，需要将 [scroll MINUS the height of all previous section] 与当前部分的高度进行比较。

【讨论】：

啊，这有点工作，但说我的导航 li 是 209px 宽。我如何将该百分比的读取应用到我的导航项目的背景（像素位置）？ background: linear-gradient(to right, #A1C866 49%,#A1C866 49%,#EDEDED 49%); for example?
你有一个例子说明我将如何减去或执行每个后续部分吗？我似乎无法弄清楚如何减去并获得任何其他部分的正确值。

【解决方案2】：

有趣...所以您使用渐变作为进度指示器？一旦您使用我提到的计算获得百分比，您就可以将该百分比用于第一种颜色，但是您不需要指定第二种颜色的百分比，因为它只占用其余部分......就像这样：

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

然后它只显示用户滚动当前部分的距离。

【讨论】：

【解决方案3】：

此外，获取每个部分的高度是最简单的方法，方法是为它们提供所有 ID（如在我的示例中，section1、section2 等）......然后您可以使用 jquery 获取每个高度：

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

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

【讨论】：