0

ユーザーの画面サイズに応じて、ロード時にいくつかのオーバーレイ画像のサイズを変更しています。ただし、問題は、ロードするたびに機能するとは限らないことです。何度も更新すると、1回だけ機能します。エラーも発生しないため、問題がどこにあるのかわかりません。ChromeとFirefoxの開発ツールもチェックインしました。ここに私のコードがあります誰もがここで何が悪いのかを示唆することができます。

(function($){ 
$(window).load(function() {
var Height=$(window).height(); // New height
var Width=$(window).width(); // New width
$('.content-container').css('background-size', Width + 'px' + ' ' + Height + 'px');
$('.weare_map').height(Height*.54);
$('.invent_div').height(Height*.4);
var top2= ($(window).scrollTop());
$('.invent_div img').css('top',top2*.4);
$('.weare_map.map1').css('top',top2*.3);
$('.weare_map.pixels').css('top',top2*.2);
$('.weare_map.wearefaces').css('top',top2*.05);
  $('.content').css('height',Height + 'px');

});

$(window).resize(function() {
  // This will execute whenever the window is resized

var Height=$(window).height(); // New height
var Width=$(window).width(); // New width
$('.content-container').css('background-size', Width + 'px' + ' ' + Height + 'px');
var overlayw=$('.content-container').width();
var overlayh=$('.content-container').height();
$('.weare_map').height(Height*.54);
$('.invent_div').height(Height*.4);
var top2= ($(window).scrollTop());
$('.invent_div img').css('top',top2*.4);
$('.weare_map.map1').css('top',top2*.3);
$('.weare_map.pixels').css('top',top2*.2);
$('.weare_map.wearefaces').css('top',top2*.05);
$('.overlay').css('background-size', overlayw + 'px' + ' ' + Height + 'px');
$('.content').css('height',Height + 'px');

});

        })(jQuery);
4

1 に答える 1

2

スクロールバーの位置を使用して視差効果を達成しようとしていることがわかりますが（会話でそれが確認されます）、その変更に反応しません（つまり、scrollTopページの読み込み時にほとんど常に0になります）。scrollイベントにも耳を傾ける必要があります。試す：

$(window).on("load resize scroll", function(){
  var height=$(window).height(); // New height
  var width=$(window).width(); // New width
  ...

});

代わりに：

function recalculatePositions(){
  var Height=$(window).height(); // New height
  var Width=$(window).width(); // New width
  ...

}

$(window).on("load resize scroll", recalculatePositions);
  // $(window).load(function) has been deprecated
于 2012-12-23T08:58:28.717 に答える