0

私は、お互いの下にいくつかの div があり、上部に固定されたメニューを持つ Web サイトを作成しています。新しい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');
  }
});

これは問題なく機能しますが、デザインをレスポンシブにしたいので、Web サイトの一部で背景色を変更したいと考えています。それは可能ですか？

ありがとう！

4

1 に答える 1

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

下にスクロールするほどドキュメントを赤くする方法の例。パーセントを表示したい16進値にマップする関数を実装することもできます:)

または、パーセントに応じて変更したい場合：

$(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');
}
);
于 2013-04-26T12:55:56.257 に答える