粘滞标头动画线性背景颜色

Question

我已经在网上搜索了100次，找到了我喜欢的东西。我一无所获，并试图自己做。两天后，由于种种原因，我放弃了。所以我在这里问你们所有人是否可以为我做这件事。想想一个鼓棒标题，你向下滚动一个网站，标题与它固定在顶部。所以我的想象是，每当标题点击data-color="#2D2D2D"的部分时，标题背景颜色将更改为它。但是等等，我希望它与背景图像呈线性关系，所以如果他将其着色线性回滚到之前的颜色。

这是我见过的文章。但它只是一个图像，它在内容中。 https://codyhouse.co/demo/fixed-background-effect/index.html

这是我的笔（这只是一个尝试） http://codepen.io/muuvmuuv/pen/MarxYx

这是一个img

Answer 1

我已经根据您的需求做了一个基本的例子，只是看看并告诉我，如果我理解你所说的话。我在js代码中添加了一些额外的解释，小提琴就在这篇文章的末尾。

基本HTML标记

\)$

我要使用SCSS，但您可以轻松更新到基本CSS（我假设粘贴标头是默认的，所以我添加了一个填充到主体，其值与标题高度相同）

)

和jQuery代码。

<heade id="webHeader">
    <nav>
        <ul>
            <li><a href="#">Nav item 1</a></li>
            <li><a href="#">Nav item 2</a></li>
            <li><a href="#">Nav item 3</a></li>
        </ul>
    </nav>
</heade>


<section id="section-1" data-color="#330000"></section>
<section id="section-2" data-color="#00B200"></section>
<section id="section-3" data-color="#803380"></section>

您可以在此fiddle中看到它正常工作。我会做一些更新，但我有点忙，但我建议你阅读更多有关jQuery debounce的内容并尝试smart scroll（对于减少滚动事件而言非常有用 - 对性能有益）< / p>

我希望你正在寻找：）