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

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

<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（我假设粘性标题是默认的，所以我在正文中添加了一个填充，其值与标题高度相同）

$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 +")";
}

你可以看到它在这个小提琴中工作。我会做一些更新，但我现在有点忙，但我建议您阅读更多有关jQuery debounce 的内容，并尝试一下智能滚动（对于调用较少的滚动事件很有用 - 对性能有好处）

我希望这就是您正在寻找的:)