javascript - ランダムな CSS 変更を実行する

Question

$(window).scroll(function() {
  if ($(window).scrollTop() > 200) {
    $('#box').css({height:'100px', background-color:'green', overflow:'visible', width:'550px', margin:'0 auto'
  });

  $('#box2').css({position:'fixed',left:'400px',height:'200px',background: '#CF0'});
}

私はJavaScriptが初めてなので、これは簡単な質問かもしれません...

ここにあるのは、現在のページの場所 (この場合は > 200) に応じて、div (#box) の css スタイルを変更することです。

私が達成しようとしているのは、複数の css 変更を #box に追加し、毎回ランダムに変更することです。たとえば、一番上から 200 をスクロールするたびに、div は高さ: '100px' で緑の背景、高さ: '200px' で青の背景、または高さ: '300px' で赤の背景のいずれかで表示されます。これが理にかなっていることを願っています....