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

在高度百分比上更改div背景颜色

1 个答案: