Изменить цвет фона div на процент от высоты

Question

Я делаю сайт с парой divs под друг друга и меню, которое прилипает к вершине. Когда вы достигнете нового div, я хочу изменить цвет фона в меню. У меня уже есть этот скрипт;

$(document).ready(function(){ 
    var scroll_pos = 0; 
    $(document).scroll(function() { 
    scroll_pos = $(this).scrollTop(); 
    if(scroll_pos > 2280) { 
     $("#menu").css('background-color', '#6FC6DF'); 
    } else { 
     $("#menu").css('background-color', '#B4B4B4'); 
    } 
    } 
); 
$(document).scroll(function() { 
    scroll_pos = $(this).scrollTop(); 
    if(scroll_pos > 3220) { 
    $("#menu").css('background-color', '#B4B4B4'); 
    } 
}); 

Это прекрасно работает, но теперь, когда я хочу сделать дизайн отзывчивым, я хотел бы цвета фона, чтобы изменить на проценте сайта. Это возможно?

Спасибо!

Answer 1

$(document).scroll(function() { 
    var scroll_pos=$(document).scrollTop(); 
    var docHeight=$(document).height(); 
    var percent=(scroll_pos/docHeight); 
    var red=Math.round(255*percent); 
    $("body").css('background-color', 'rgba('+red+',0,0,1)'); 
} 
); 

Пример, как сделать документ более красным, чем ниже вы прокрутите. Вы также можете реализовать функцию, которая отображает процент к шестнадцатеричным вы хотите отобразить :)

Или, если вы хотите изменить в зависимости от процента:

$(document).scroll(function() { 
    var scroll_pos=$(document).scrollTop(); 
    var docHeight=$(document).height(); 
    var percent=Math.round((scroll_pos/docHeight)*100); 
    if (percent>33) 
     $("#menu").css('background-color', '#ff0000'); 
} 
);