粘性 header 动画线性背景色

Question

我在网上搜索了 100 次，只为找到我想要的东西。我一无所获，并尝试自己做。两天后我因为很多原因放弃了。所以我在这里问大家是否有人可以为我做这件事。想想一根棍子 header，你向下滚动一个网站，然后 header 固定在顶部。所以我的想象是，每次 header 命中带有 data-color="#2D2D2D" 的部分时，header 的背景颜色都会随之改变。但是等等，我希望它与背景图像成线性关系，所以如果他向后滚动，它的着色与之前的颜色成线性关系。

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

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

这是一张图片

Answer 1

我已经根据你的需要做了一个基本的例子，你看一下，如果我明白你说的，请告诉我。我在 js 代码中添加了一些额外的解释，fiddle 在这个 post.

的末尾

一个基本的 HTML 标记

<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>

我打算使用 SCSS，但您可以轻松更新到基本 CSS（我假设默认情况下粘性 header 所以我在 body 的值与 header 高度相同）

$headerHeight: 100px;

body {
    padding-top: $headerHeight;
}

#webHeader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: $headerHeight;
    background: #000F1F; /*default background color and fallback if there is no section available for it*/

    nav {
        padding: 40px;
        float: right;

        li {
            display: inline-block;
            margin: 0 10px;
        }

        a {
            color: #fff;
            font-weight: 700;
            text-decoration: none;

        }
    }

}


section {
    width: 100%;
    height: 500px;
    background-color: grey;
    border-bottom: 1px dashed #fff;
}

和 jQuery 代码。

(function($){
    // cache dom elements
    var $header = $('#webHeader');
    var $window = $(window);
    var headerHeight = $header.outerHeight(true);

    var colors = []; // add colors here
    var sections = []; // add sections positions

    $('section').each(function(){
        var $this = $(this);

        colors.push($this.data('color'));
        sections.push($this.position().top);
    });

    // duplicate first color
    colors.unshift(colors[0]);

    $window.on('scroll', function(){
        var position = $window.scrollTop() + headerHeight;
        var index = inInterval(position, sections);
        var distance = position - sections[index];

        $header.attr('style', linearGradient( colors[index+1], colors[index], distance ) );

    }).trigger('scroll');
    // trigger scroll when the page is loaded to update the header color to the current position

})(jQuery);

// Treat array elements as intervals
function inInterval(value, array) {
    // cache array length
    var arrLen = array.length;

    // Add one more value at the end of array to avoid having problems on last item
    array.push(array[arrLen-1]*2);

    for (var i = 0; i < arrLen+1; i++)
        if (value >= array[i] && value <= array[i+1])
            return i;
}

function linearGradient(start, end, distance) {
    var distanceStart = distance + '%';
    var distanceEnd = 100 - distance + '%';
    return "background: -webkit-gradient(linear, left top, left bottom, color-stop(0, "+ start +"), color-stop("+ distanceStart +", "+ start +"), color-stop("+ distanceStart +", "+ end +"), color-stop(100, "+ end +")";
}

你可以看到它在这个 fiddle. I would make some updates but I am bit busy for moment, but I recommend you to read more about jQuery debounce and give a try to smart scroll 中工作（对于调用较少的滚动事件很有用 - 有利于性能）

希望是您要找的:)

粘性 header 动画线性背景色

Sticky header animated linear background color

html

javascript

css

jquery

jquery-effects