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

Posted 2023-03-06

【中文标题】如何在固定内容上滚动图像？

【英文标题】：How to scroll an image over fixed content?

【发布时间】：2022-01-06 07:18:25

【问题描述】：

我正在构建一个 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>

【问题讨论】：

我们给你做了一个sn-p。缺少一些数组

我没有在 sn-p 中做任何事情。我将您的代码转换为 sn-p - 我为什么要回答您的问题？

很抱歉我误解了您最初的评论。这是我第一次使用 Stack Overflow，我没有意识到这是你所做的。道歉。

只需添加css样式“position:sticky;”到图片下方的页面内容

【参考方案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)

【讨论】：

是的好主意，谢谢以上。主要思想是我想要你在上面的动画中发生了什么，但是当用户滚动时。作为一种折衷方案，与其在滚动时让它移动，不如在滚动时触发 CSS 动画。

如果他们向上滚动。你想让它回到屏幕上吗？页面上还会有其他内容，还是整个页面都在图片下方？

不，我只想在他们登陆页面时显示，而不是在他们向上滚动时显示。它将是图像下方的整个主页，因此我希望图像独立于下方的主页向上滚动。

尝试根据页面滚动量来偏移图像叠加层下方的内容。一种方法是将页面包裹在图像下方的 div 中，然后将其设置为 position:absolute。然后在您的函数中将包装 div 的 marginTop 设置为与 square1.style.bottom 相同。这会产生预期的效果吗？

是的，行得通！谢谢。