滚动时更改div的位置

时间:2017-01-03 15:11:38

标签: javascript jquery html css

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

代码:

transform

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

1 个答案:

答案 0 :(得分: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;
}