Javascript 根据高度百分比更改div背景色

我正在制作一个网站，每个网站下都有几个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');
  }
});

这很好，但现在我想使设计响应，我想改变网站的背景颜色的百分比。可能吗

谢谢

$(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');
}
);

---

第二个div不是从特定数量的像素开始的，而是从屏幕高度的100%开始。那么，如何在javascript中使用%而不是像素呢？我尝试过，但没有成功，我是否需要对该脚本进行任何更改才能使其正常工作？正如您所知，这里没有Javascript代码打开你的firebug/chromebug。。。（如果您安装了它，它通常绑定到F12），并检查javascript控制台以查看哪里出了问题：）