相对于父项固定内容

时间：2018-08-19 14:01:58

标签： jquery html css parallax

我正在建立一个网站，通过该网站滚动时，看起来好像下面的部分具有100vh的高度，与当前部分重叠，如下所示：

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

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

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

创建一个函数来计算内容在页面上的位置，如果内容在页面附近，则将其“漫游”到视口顶部（不是我真正想要的效果，而是在此处使用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;

我希望实现的内容与链接中的视频非常相似，除了我希望内容本身随部分（上下）移动，同时固定在其所属的部分上而不停留在视口并使用z-index隐藏。

我不是100％肯定这是最好的方法。

任何帮助都将不胜感激。

1 个答案:

答案 0 :(得分：3)

所以你想：

  • 带有部分的可滚动页面
  • 具有固定背景附件的部分
  • 内容应始终“固定在中心” （固定在其相应容器的中间）
  • 滚动页面时，每个下一部分都应与前一个重叠（包括内容！）

我要做的是：

  • 使用CSS position: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;设置为内容元素-我们最终看到它们彼此重叠。坏。但是...
如果我们将每一个都包裹在剪贴父中-只有在查看中滚动剪贴父时才会出现。

粘性内容

不是固定内容，而是上述内容的粘性版本

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>
相关问题
最新问题