Question

我正在根据用户的屏幕尺寸调整负载上的一些叠加图像的大小。但问题是它每次加载都不起作用。如果我刷新太多次它会工作一次。不知道问题出在哪里，因为没有错误发生。我也检查过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);

Answer 1

我可以看到你正在尝试使用滚动条位置来实现视差效果（会话确认了这一点）但你没有对它的变化作出反应（即，scrollTop几乎总是0页面加载）。你也应该听scroll events。尝试：

$(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

调整大小并定位图像不起作用

1 个答案: