Question

我希望在向下滚动页面时向上滚动图像。我可以很容易地做到这一点，但我遇到的问题是在jQuery中我改变了图像的CSS，特别是它的nchar("\\") #[1] 1属性。但我已经使用了transform属性，将图像居中对齐。

代码：

transform

因为我使用transform属性来居中对齐图像，所以jQuery正在改变我的图像位置。

Answer 1

我改变了wScroll的计算，使图像的滚动跟随页面的滚动。如果这有帮助，请告诉我。

Fiddle

的javascript

$(window).on("scroll", function() {
  var wScroll = ($(this).scrollTop() / $(window).height()) + 50;
  $('.planeImg').css({
    'transform': 'translate(-50%, -' + (wScroll) + '%)'
  })
});

CSS

.planeImg {
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: url("https://www.google.be/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 99;
  height: 80px;
  width: 300px;
}

滚动时更改div的位置

1 个答案: