如何在固定内容上滚动图像？

Question

我正在构建一个 Shopify 网站，并希望在您登陆该网站时覆盖图片以覆盖顶部内容。然后，当您滚动时，此叠加图像会在屏幕上上下移动，从而显示网站。

我找到了一些执行此操作的 javascript，但主网站会随着覆盖图像滚动。有没有办法让它自己滚动而不滚动后面的内容？

这是我目前所拥有的：

var container = document.getElementById('overlay-container');
var windowHeight = window.innerHeight;
var windowWidth = window.innerWidth;
var scrollArea = 1000 - windowHeight;
var square1 = document.getElementsByClassName('overlay-background-image')[0];
// var square2 = document.getElementsByClassName('overlay-logo')[1];

// update position of square 1 and square 2 when scroll event fires.
window.addEventListener('scroll', function() {
  var scrollTop = window.pageYOffset || window.scrollTop;
  var scrollPercent = scrollTop / scrollArea || 0;

  square1.style.bottom = -100 * (1 - scrollPercent * 1.5) + 'vh';
  //   square2.style.top = 800 - scrollPercent*window.innerHeight*0.6 + 'px';
});


// Global variable to control the scrolling behavior
const step = 30; // For each 30px, change an image
function trackScrollPosition() {
  const y = window.scrollY;
  const label = Math.min(Math.floor(y / 30) + 1, 20);
  const imageToUse = fruitImages[label];
  // Change the background image
  $('.image-container').css('background-image', `url('${imageToUse}')`);
}
$(document).ready(() => {
  $(window).scroll(() => {
    trackScrollPosition();
  })
})

.overlay-container {
  position: relative;
  max-width: 100%;
}

.overlay-background-image {
  position: absolute;
  z-index: 5;
  left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="overlay-container">
  <div class="overlay-background-image">
    <img style="height: 100vh;" src="https://cdn.shopify.com/s/files/1/0608/2225/7886/files/01_-_Landing_Page.png?v=1636020266" />
  </div>
</div>

Answer 1

编辑： 我误读了这个问题。

原答案：

加载页面后，这将自动将图像滚动到屏幕外。 （不是问题想要的）

我建议使用 css 而不是 JavaScript。

body {
  margin: 0px;
}

.overlay-background-image {
  animation-fill-mode: forwards;
  animation-name: shop_reveal;
  animation-duration: 3s;
  position: absolute;
  width: 100vw;
  background-size: calc(100vh * 1440/767);
  height: 100vh;
  background-image: url('https://cdn.shopify.com/s/files/1/0608/2225/7886/files/01_-_Landing_Page.png?v=1636020266');
}

@keyframes shop_reveal {
  from {
    bottom: 0px
  }
  to {
    bottom: 100vh
  }
}

<div class="overlay-container">
  <div class="overlay-background-image">
  </div>
</div>

编辑的答案： 这将与滚动条一起滚动图像。

    <div class="overlay-container">
      <div class="overlay-background-image">
      </div>
    </div>```

<!-- end snippet -->

pagebox is the content that will be revealed when the user scrolls the page.

<!-- language: lang-css -->
```#pagebox {
position: absolute;
}```
<!-- end snippet -->

Give pagebox absolute positioning so that it's position can be set in JavaScript and it doesn't push the image.

<!-- language: lang-javascript -->
```var container = document.getElementById('overlay-container');
var windowHeight = window.innerHeight;
var windowWidth = window.innerWidth;
var scrollArea = 1000 - windowHeight;
var square1 = document.getElementsByClassName('overlay-background-image')[0];
// var square2 = document.getElementsByClassName('overlay-logo')[1];

var p = document.getElementById("pagebox");

// update position of square 1 and square 2 when scroll event fires.
window.addEventListener('scroll', function() {
  var scrollTop = window.pageYOffset || window.scrollTop;
  var scrollPercent = scrollTop / scrollArea || 0;

  square1.style.bottom = p.style.marginTop = -100 * (1 - scrollPercent * 1.5) + 'vh';
  //   square2.style.top = 800 - scrollPercent*window.innerHeight*0.6 + 'px';
});```

<!-- end snippet -->

As the page is scrolled. The image overlay is moved up by this code. However the normal functioning of the scrolling is still in effect so the rest of the page moves up with it. In order to counteract this. The position of the content underneath the image is moved down by the amount the page is scrolled. 

(simply using position:sticky would prevent the content underneath the page from exceeding the height of the window so can't be used)