Нужно определить положение фиксированного блока и в зависимости от того находится ли он на то или ином блоке присваивать ему class. Написал такое, работает как надо.
$(function(){
$(window).scroll(function(){
var height1 = $('.why').outerHeight();
var top1 = $('.why').position().top - 200;
var screen1 = height1 + top1;
var height2 = $('.footer').outerHeight();
var top2 = $('.footer').position().top - 200;
var screen2 = height2 + top2;
var height3 = $('.promo').outerHeight();
var top3 = $('.promo').position().top;
var screen3 = height3 + top3;
if ($(window).scrollTop() > top1 && $(window).scrollTop() < screen1) {
$('.ribbon').removeClass('dark');
}
else if ($(window).scrollTop() > top2 && $(window).scrollTop() < screen2) {
$('.ribbon').removeClass('dark');
}
else if ($(window).scrollTop() > top3 && $(window).scrollTop() < screen3) {
$('.ribbon').removeClass('dark');
}
else {
$('.ribbon').addClass('dark');
}
});
});
Но лишь на главной странице, так как не все блоки есть на других страницах. Поэтому решил присвоить общий класс для этим блоков и проходить циклом. Но никак не додумаю как правильно сделать, помогите)
$(function(){
$(window).scroll(function(){
$(".dark-block").each(function() {
var height = $(this).outerHeight();
var top = $(this).position().top - 200;
var screen = height + top;
if ($(window).scrollTop() > top && $(window).scrollTop() < screen) {
$('.ribbon').addClass('dark');
}
else {
$('.ribbon').removeClass('dark');
}
});
});
});