Question

我正在开发一个网站，其中英雄/标题分为两个部分，一个是带有信息的左侧站点，另一个是带有图形的右侧。右侧（图像）应该具有简单的视差效果，所以我给它background-attachment: fixed;。

现在，当图形底部点击下一部分时，我应该更改background-attachment属性，这样图片就会向上滚动，然后是其他文本。

这是一个小提琴，可能会让我的意图更清晰。

https://jsfiddle.net/fg67ho2L/1/

有没有办法让这种情况发生，所以右侧（图像）的表现如预期的那样？感谢。

Answer 1

您需要做的是更改右侧的height属性，以便在您想要实现这一目标时更少左侧。

Answer 2

脚本给我一个错误，所以我改了

var abouttop = document.getElementById("about").getBoundingClientRect().height;

我决定不使用background-attachment而是使用transforms。此外，您错过了文本容器的id="about"。我没有使用JQuery所以这里有一些工作js（抱歉这个烂摊子）：

var pos = 0;

var imageControl = function(e) {
  var scrollposition = document.documentElement.scrollTop;
  var abouttop = document.getElementById("about").getBoundingClientRect().height;
  var scrollBottom = jQuery(window).scrollTop() + jQuery(window).height();
  var image_height = document.getElementById("image").getBoundingClientRect().height;
  // console.log(scrollBottom);

  if (scrollBottom < abouttop) {
    pos = scrollposition;
  } else if (scrollBottom > abouttop) {
    //pos = abouttop-image_height;
  }
  console.log(pos);
  document.getElementById("image").style.transform = "translateY(" + pos + "px)";
};

jQuery(window).scroll(imageControl);

CSS背景滚动效果

2 个答案: