div의 배경색을 높이의 백분율로 변경하십시오.

Question

저는 서로 아래에있는 몇 개의 div와 상단에 붙어있는 메뉴로 웹 사이트를 만들고 있습니다. 새 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'); 
} 
);