javascript - 根据高度百分比更改 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');
}
);