Sticky header animated linear background color

Question

I´ve searched the web 100 of times to find something that is like that what I want. I found nothing and tried to do it myself. After two days I give up because of many reasons. So I´m asking you all here if some one can do it for me. Think about a sticks header, you scroll down a website and the header goes with it fixed on the top. So my imagine was, every time the header hits a section with data-color="#2D2D2D", the headers background color will change to it. But wait, I want that it happens linear with a background image, so if he scrolls back its the coloring linear to the color before.

Here is the article I´ve seen. But there its just a image and it is in the content. https://codyhouse.co/demo/fixed-background-effect/index.html

Here is my Pen (It was just a try) http://codepen.io/muuvmuuv/pen/MarxYx

Here is a img

Milreis

Answer 1

I have made a basic example accordiong to your needs, just have a look and tell me if I understood what you said. I have added some extra explanation in the js code and the fiddle is at the end of this post.

A basic HTML markup

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

I am going for SCSS but you can easly update to basic CSS (I assumed that the sticky header is by default so I have added a padding to body with the same value as the header height)

$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;
}

And the jQuery code.

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

You can see it working in this 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 (useful to call bit less scroll events - good for performance)

I hope is what you are looking for :)

Hairdo

Hm no im sorry, but this is not what im looking for. I mean that the header change the background color onscroll over the new section to that before. So if u scroll to section 2 (green) the header will get the color from section 1 (blue), but not instandly. As a linear background image so it looks like a gradient – Milreis

So the gradient of the header should have as a top color the color of the previous section and the bottom color the color of the current section? – Hairdo

Please check my updates, i think i understood the "reverse it". So right now the header has on the top current section's background and on the bottom the previous section's background – Hairdo

i added a photo... I want that the gradient is animation px by px into the next section. like: background-image: linear-gradient($colorbefore 50%, $color 50%) – Milreis

Does it make sense? Thank you (Directly updated the code and the fiddle link) – Hairdo