I have created a simple example accordion based on your requirements. Please review it and let me know if I have accurately understood your instructions. Additional explanations have been included in the JavaScript code, and you can find the fiddle link at the end of this post.
Here is the 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 using SCSS for styling, but it can be easily converted to basic CSS. I have assumed that the sticky header is default, so I added padding to the body equal to the header's height.
$headerHeight: 100px;
body {
padding-top: $headerHeight;
}
#webHeader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: $headerHeight;
background: #000F1F;
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;
}
Below is the jQuery code:
(function($){
// cache dom elements
var $header = $('#webHeader');
var $window = $(window);
var headerHeight = $header.outerHeight(true);
var colors = [];
var sections = [];
$('section').each(function(){
var $this = $(this);
colors.push($this.data('color'));
sections.push($this.position().top);
});
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');
})(jQuery);
function inInterval(value, array) {
var arrLen = array.length;
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 view the working example in this fiddle. While I may not be able to make updates currently, I suggest exploring more about jQuery debounce and trying out smart scroll for optimizing scroll event performance.
I hope this meets your requirements! :)