修复相对于父级的内容

Question

我正在构建一个网站，当滚动时，它会显示下方高度为 100vh 的部分与当前部分重叠，如下所示：

https://i.gyazo.com/152c66a9476dd522958c77158f669c14.mp4

我现在遇到的问题是内容本身无法固定到相对父级，因为 position: fixed 是相对于视口而不是父容器。

到目前为止，我设法实现的是：

创建一个函数来计算内容在页面上的位置，并 'achors' 如果它靠近视口顶部（不是我真正想要的效果，但使用position: absolute这里让内容在滚动的时候随着部分向上移动，当我需要和滚动到的部分重叠时）

    function parallaxScroll() {
    $(window).scroll(function(){
        $(".section-text").each(function(){
            $(this).css('margin-top', $(window).scrollTop() - $(this).parent().position().top);
        });
    });

背景有重叠效果通过设置如下CSS:

background: url(/images/objectives/titanic.jpg) no-repeat fixed;
background-position: center center;
background-size: cover;

我想要实现的与 link 中的视频非常相似，除了我希望内容本身随着部分移动（上下）同时固定在它所属的部分使用 z-index.

来而不是停留在视口中并隐藏

我不是 100% 确定这是最好的方法。

非常感谢任何帮助。

Answer 1

所以你想：

带有部分的可滚动页面
具有固定背景附件的部分
内容应始终 "center-fixed"（固定在其各自容器的中间）
滚动页面时，每个下一节 应该与上一节重叠（包括内容！）

我会做的是：

使用CSSposition:fixed内容
将内容包装到剪裁的 clip-path: polygon 元素中（高度与 section 父元素相同）

固定内容

section { 
  height: 100vh;
}

.fix {
  position: fixed;
  top: 50vh;
  left: 10vw;
  transform: translate(0%, -50%);
  max-width: 33vw;
  color: #fff;
}

.clip {
  height: inherit;
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
}

/* Just some general styles... */
*{margin:0;box-sizing:border-box;}
html,body{height:100%;font:14px/1.4 sans-serif;}
h1{font-weight: 100;font-size:9vh} p{font-size: 2.8vh;}

[class^='bg-'],[class*=' bg-'] {background: fixed center/cover none no-repeat;}
.bg-1{background-image: url('https://i.stack.imgur.com/M1VOY.jpg');}
.bg-2{background-image: url('https://i.stack.imgur.com/k6u3t.jpg');}
.bg-3{background-image: url('https://i.stack.imgur.com/j3ZBA.jpg');}

<section class="bg-1">
  <div class="clip">
    <div class="fix">
      <h1>staircase to</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique corporis saepe doloribus optio nulla laudantium accusantium esse nostrum soluta!</p>
    </div>
  </div>
</section>

<section class="bg-2">
  <div class="clip">
    <div class="fix">
      <h1>the subterrain of</h1>
      <p>Eveniet quaerat architecto nemo in eum accusamus ipsa! Nisi hic laboriosam nesciunt, magnam tempore, praesentium, eveniet iusto est inventore doloremque animi iure</p>
    </div>
  </div>
</section>

<section class="bg-3">
  <div class="clip">
    <div class="fix">
      <h1>our great city</h1>
      <p>Optio nulla laudantium accusantium esse nostrum soluta! Consectetur adipisicing elit. Similique corporis saepe doloribus optio nulla</p>
    </div>
  </div>
</section>

绝招

通过为内容元素设置 position:fixed; - 我们最终看到它们相互重叠。坏的。但是...
如果我们将每个人都包装到一个剪裁父级中 - 这样只会通过在视图中滚动剪裁父级来显示。

置顶内容

这里没有修复内容，而是上面sticky版本

section { 
  height: 100vh;
}

.fix {
  position: sticky;
  top: 20vh;
  padding-bottom: 20vh;
  left: 10vw;
  max-width: 33vw;
  color: #fff;
}

.clip {
  height: inherit;
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
}

/* Just some general styles... */
*{margin:0;box-sizing:border-box;}
html,body{height:100%;font:14px/1.4 sans-serif;}
h1{font-weight: 100;font-size:9vh} p{font-size: 2.8vh;}

[class^='bg-'],[class*=' bg-'] {background: fixed center/cover none no-repeat;}
.bg-1{background-image: url('https://i.stack.imgur.com/M1VOY.jpg');}
.bg-2{background-image: url('https://i.stack.imgur.com/k6u3t.jpg');}
.bg-3{background-image: url('https://i.stack.imgur.com/j3ZBA.jpg');}

<section class="bg-1">
  <div class="clip">
    <div class="fix">
      <h1>staircase to</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique corporis saepe doloribus optio nulla laudantium accusantium esse nostrum soluta!</p>
    </div>
  </div>
</section>

<section class="bg-2">
  <div class="clip">
    <div class="fix">
      <h1>the subterrain of</h1>
      <p>Eveniet quaerat architecto nemo in eum accusamus ipsa! Nisi hic laboriosam nesciunt, magnam tempore, praesentium, eveniet iusto est inventore doloremque animi iure</p>
    </div>
  </div>
</section>

<section class="bg-3">
  <div class="clip">
    <div class="fix">
      <h1>our great city</h1>
      <p>Optio nulla laudantium accusantium esse nostrum soluta! Consectetur adipisicing elit. Similique corporis saepe doloribus optio nulla</p>
    </div>
  </div>
</section>

类似固定和粘性

对于视觉固定和粘性的组合，只需将内容高度设置为0。这样可以让下一节完全覆盖之前的内容：

section { 
  height: 100vh;
}

.fix {
  position: sticky;
  height: 0; /* this is important to get the top-stop effect */
  top: 20vh;
  left: 10vw;
  max-width: 33vw;
  color: #fff;
}

.clip {
  height: inherit;
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
}

/* Just some general styles... */
*{margin:0;box-sizing:border-box;}
html,body{height:100%;font:14px/1.4 sans-serif;}
h1{font-weight: 100;font-size:9vh} p{font-size: 2.8vh;}

[class^='bg-'],[class*=' bg-'] {background: fixed center/cover none no-repeat;}
.bg-1{background-image: url('https://i.stack.imgur.com/M1VOY.jpg');}
.bg-2{background-image: url('https://i.stack.imgur.com/k6u3t.jpg');}
.bg-3{background-image: url('https://i.stack.imgur.com/j3ZBA.jpg');}

<section class="bg-1">
  <div class="clip">
    <div class="fix">
      <h1>staircase to</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique corporis saepe doloribus optio nulla laudantium accusantium esse nostrum soluta!</p>
    </div>
  </div>
</section>

<section class="bg-2">
  <div class="clip">
    <div class="fix">
      <h1>the subterrain of</h1>
      <p>Eveniet quaerat architecto nemo in eum accusamus ipsa! Nisi hic laboriosam nesciunt, magnam tempore, praesentium, eveniet iusto est inventore doloremque animi iure</p>
    </div>
  </div>
</section>

<section class="bg-3">
  <div class="clip">
    <div class="fix">
      <h1>our great city</h1>
      <p>Optio nulla laudantium accusantium esse nostrum soluta! Consectetur adipisicing elit. Similique corporis saepe doloribus optio nulla</p>
    </div>
  </div>
</section>

提示：

因为上面使用 height:0 来实现完全重叠，但是如果你真的需要一个有一定高度的内容（在较小的屏幕上应用溢出滚动等），在这种情况下创建一个额外的高度用 vh 和 overflow: hidden; overflow-y: auto; 表示的子元素（如果需要）。

如果您需要使用 clip-path: url(#fullClip);，请将此 svg 放入您的文档中

<svg width="0" height="0" style="display:block;">
    <defs>
      <clipPath id="fullClip" clipPathUnits="objectBoundingBox">
        <path d="M0,0 1,0 1,1 0,1"/>
      </clipPath>
    </defs>
</svg>

修复相对于父级的内容

Fixing content relative to parent

jquery

html

css

parallax

固定内容

置顶内容

类似固定和粘性