时间戳

首页 > 解决方案 > 视差：如何将绝对定位的图像保留在相对 div 中？

javascript - 视差：如何将绝对定位的图像保留在相对 div 中？

问题描述

我有这个块：

截屏 我想在图片上创建视差效果，同时将它们保持在（或至少靠近）其父 div 内。

这在我的代码中：

<div class="head-block">
    <div class="image-block-left">
      = image_tag('home/specialite-1-compressor.jpg', id: 'block-left-specialite1')
      = image_tag('home/specialite-2-compressor.jpg', id: 'block-left-specialite2')
    </div>

    <div class="content-block">
      span.badge.badge-warning.homepage-badge
        | Expertise
      .homepage-title
        h2
          | Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      p
        | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla mollis feugiat libero quis mollis. Praesent risus purus, pellentesque in risus at, posuere laoreet eros. Ut non congue erat. Pellentesque tincidunt ultrices leo vel porttitor. Fusce a ligula ut libero aliquet feugiat. Nulla facilisi. Curabitur consectetur eu quam vel blandit. In non enim quis justo malesuada volutpat.
    </div>

    <div class="image-block-right">
      = image_tag('home/specialite-3-compressor.jpg', id: 'block-left-specialite3')
      = image_tag('home/specialite-4-compressor.jpg', id: 'block-left-specialite4')
    </div>
</div>

  .head-block {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .image-block-left {
      position: relative;
      width: 17.5%;
      img:nth-child(1) {
        width: 150px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
      }
      img:nth-child(2) {
        height: 180px;
        position: absolute;
        top: 100px;
        right: 0;
        z-index: 1;
      }
    }
    .content-block {
      width: 65%;
      text-align: center;
    }
    .image-block-right {
      position: relative;
      width: 17.5%;
      img:nth-child(1) {
        height: 200px;
        position: absolute;
        top: 0;
        right: 0;
      }
      img:nth-child(2) {
        width: 130px;
        position: absolute;
        top: 155px;
        left: 0;
      }
    }
  }

我试过这段代码：

  function parallaxEffect() {
    let scrolled = $(window).scrollTop();
    $('#block-left-specialite1').css('top', (0 - (scrolled * .5)) + 'px');
    $('#block-left-specialite2').css('top', (100 - (scrolled * .65)) + 'px');
    $('#block-left-specialite3').css('top', (0 - (scrolled * .52)) + 'px');
    $('#block-left-specialite4').css('top', (155 - (scrolled * .67)) + 'px');
  }

但它不起作用，因为head-blockdiv 不在页面顶部。如何将图像保留在其父 div 中？

标签： javascriptjqueryhtmlcssparallax

解决方案

最后，我通过这种方式实现了这一点：

  function parallaxEffect() {
    let windowScrolled      = $(window).scrollTop();
    let sliderBlockScrolled = $('.homepage-sliderblock').offset().top;

    $('.top-block-right').css('top', (0 - (windowScrolled * .25)) + 'px');
    $('#block-left-specialite1, #block-left-specialite3').css('top', (0 - ((windowScrolled - sliderBlockScrolled) * .25)) + 'px');
    $('#block-left-specialite2, #block-left-specialite4').css('top', (100 - ((windowScrolled - sliderBlockScrolled) * .35)) + 'px');
  }

因此，当父 div 可见时，元素与视差效果处于同一级别。

推荐阅读