Question

我过去几天一直在网站上工作。我刚刚上传它，并且不知道为什么我在滚动事件的图像峰值处得到小线条？

任何想法如何解决这个问题？

基本上我使用JQuery来改变速度的图像。我将展示图像及其HTML的基础：

<div class="mountains1"></div>

CSS：

.mountains1 {
  background: url(../img/mountains1.png) repeat;
  background-size: cover;
  width: 100%;
  height: 800px;
  position: absolute;
  z-index: 13;
}

和JavaScript：

var parallax = function(){
  var $scrollY = $(window).scrollTop();
  var $scrollX = $(window).scrollLeft();
  $('.mountains1'  ).css('top', '1640' -($scrollY * 1) + 'px');
}

$(document).ready(function(){parallax();});
$(window).scroll(function(){parallax();});

PS。我正在使用safari，当bug发生时，它不会发生在chrome中。

当我因某种原因使用ceil（）或round（）方法时会破坏它吗？

以下是我对Leo的回应

var parallax = function(){
var $scrollY = $(window).scrollTop();
var $scrollX = $(window).scrollLeft();
var $scrollYint = Math.round($scrollY);
$('.cloudback'  ).css('top', '-375' -($scrollYint * 0.4) + 'px');

$('.mountains1'  ).css('top', '1640' -($scrollYint * 1) + 'px');
$('.mountains2'  ).css('top', '1200'-($scrollYint * 0.75) + 'px');
$('.mountains3'  ).css('top', '720'-($scrollYint * 0.3) + 'px');

$('.navbar2'  ).css('top', '1700' -($scrollYint * 0.7) + 'px');

$('.forest1'  ).css('top', '3100' -($scrollYint * 0.8) + 'px');
$('.forest2'  ).css('top', '2600'-($scrollYint * 0.6) + 'px');
$('.forest3'  ).css('top', '2100'-($scrollYint * 0.4) + 'px');

$('.navbar3'  ).css('top', '3600' -($scrollYint * 0.8) + 'px');

//$('.grass1'  ).css('top', '5250' -($scrollY * 0.8) + 'px');
//$('.grass2'  ).css('top', '4500'-($scrollY * 0.6) + 'px');
//$('.grass3'  ).css('top', '3750'-($scrollY * 0.4) + 'px');

//$('.navbar4'  ).css('top', '5500' -($scrollY * 0.8) + 'px');

}

Answer 1

我已经查看了您的代码，并看到您正在使用javascript来计算绝对定位图像的最高值。当最高值达到带小数位的值时，该线显示在图像上方。例如top: 1642.4px;而不是top:1643px。

因此，您需要更新视差函数以舍入图像顶部的值，以避免得到带小数位的结果。

图像顶部有奇怪的线虫？

1 个答案: