带有粘性元素的动画滚动

问题描述 投票：0回答：1

我的布局包括全宽图像和下面 2 列文本。

  1. 一开始我想隐藏文本列，所以它就像一个图像覆盖了视口中的整个文本。

  2. 当您开始滚动时，图像向上移动（就像普通滚动一样），然后揭开左上列的“固定”。

步骤1.1 步骤1.2

  1. 当我滚动足够多时，图像和左列之间有间隙，我想锁定图像的位置，当我滚动更多时，它会出现向上滚动右列。 右栏只要到达原来的位置就会向上移动。

第2步 步骤3

  1. 到达位置后，就会开始正常滚动。

我尝试了一些具有粘性、固定位置的方法，但我坚持了下来。 这里有什么帮助吗？

https://codepen.io/Matteokr/pen/rNgedKL

.section {
  padding: 50px 0;
}

img {
  max-width: 100%;
}

.wrapper {
  margin-top: 20px;
}

.text-left {
  background: lightyellow;
}

.text-right {
  background: lightgreen;
  // margin-top: 1000px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<section class="section">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <img src="https://placehold.co/1200x600" alt="" />
      </div>
    </div>
    <div class="row wrapper">
      <div class="col-6 text text-left">
        <h2>TEXT 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porttitor purus sit amet dapibus eleifend. Sed vel erat quis leo vehicula ultrices. Pellentesque augue ipsum, molestie sed quam at, vestibulum viverra nisi. Nunc efficitur lorem
          sed lacus pellentesque facilisis. Nullam commodo, sapien ultrices dapibus interdum, lorem quam dictum risus, a commodo purus nisl quis mi. Integer vestibulum aliquet porttitor. Vestibulum auctor neque vitae ipsum varius dignissim. Nunc quis
          augue vel sapien auctor ultricies. Maecenas varius libero iaculis neque placerat, sit amet hendrerit purus condimentum. Aenean fringilla eros ac interdum commodo. Morbi scelerisque lorem ut nisl ornare, mattis efficitur sem aliquam. In hendrerit
          tempus lectus, eu tincidunt tellus volutpat in.</p>
      </div>
      <div class="col-6 text text-right">
        <h2>TEXT 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porttitor purus sit amet dapibus eleifend. Sed vel erat quis leo vehicula ultrices. Pellentesque augue ipsum, molestie sed quam at, vestibulum viverra nisi. Nunc efficitur lorem
          sed lacus pellentesque facilisis. Nullam commodo, sapien ultrices dapibus interdum, lorem quam dictum risus, a commodo purus nisl quis mi. Integer vestibulum aliquet porttitor. Vestibulum auctor neque vitae ipsum varius dignissim. Nunc quis
          augue vel sapien auctor ultricies. Maecenas varius libero iaculis neque placerat, sit amet hendrerit purus condimentum. Aenean fringilla eros ac interdum commodo. Morbi scelerisque lorem ut nisl ornare, mattis efficitur sem aliquam. In hendrerit
          tempus lectus, eu tincidunt tellus volutpat in.</p>
        <p>Aenean ac nunc rutrum, sagittis dui pellentesque, malesuada lorem. Sed sed bibendum lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam eu neque neque. Fusce quis enim interdum, efficitur arcu at,
          dignissim turpis. Quisque bibendum risus nec tempus congue. Ut at libero ut ipsum venenatis dignissim id non purus. Vestibulum et bibendum dui, a sollicitudin lectus. Morbi mollis auctor risus at sodales.</p>
        <p>Nullam elit velit, consectetur et pretium eget, dapibus in odio. Integer nec dignissim massa. Duis convallis tellus eu molestie ornare. Quisque dapibus ipsum et euismod laoreet. Suspendisse vulputate dui quis lacinia vehicula. Integer ac commodo
          ligula. Pellentesque at vehicula ligula. Mauris nec luctus nunc, id pharetra mauris. Aenean rhoncus orci quam, sit amet elementum tortor lobortis quis. Ut in scelerisque nisl.</p>
        <p>Nullam elit velit, consectetur et pretium eget, dapibus in odio. Integer nec dignissim massa. Duis convallis tellus eu molestie ornare. Quisque dapibus ipsum et euismod laoreet. Suspendisse vulputate dui quis lacinia vehicula. Integer ac commodo
          ligula. Pellentesque at vehicula ligula. Mauris nec luctus nunc, id pharetra mauris. Aenean rhoncus orci quam, sit amet elementum tortor lobortis quis. Ut in scelerisque nisl.</p>
      </div>
    </div>
  </div>
</section>

javascript html css animation sticky
1个回答
1
投票

如果我正确理解你的目标，我想我有一个解决方案。我最终更改了 CSS，不使用 Bootstrap，因为我对它不太熟悉，并且我想确保没有任何未知的 CSS 阻止我实现正确的结果。

虽然我有一个样板部分——我在项目中使用标准——但我建议仔细阅读它。主要的事情之一是 

position
和 
box-sizing
。如果您不明白我为什么改变这些，请告诉我，我可以解释。

让它在我的示例中工作的主要因素是更改 HTML 结构，以便图像和两个文本容器都是同级的。这允许 

position: sticky;
在单独的元素上按预期工作，因为它们位于相同的滚动上下文中。

这是我所做的快速概述：

  • HTML 结构更改：

    • 使图像和文本部分成为直接兄弟姐妹

  • CSS调整：

    • 制作第一个文本部分
      position: sticky;
      ，并将
      bottom
      设置为
      0
      。这允许该部分锁定以留在图像下方，同时也保持在固定位置。
    • 将第一个文本部分设置为视口的高度（包括间距计算函数）。这允许本部分中的文本的父级保留在屏幕顶部，而不是底部。

分叉的 CodePen 并进行了更改

/* Begin Boilerplate */
* {
  margin: 0;
  padding: 0;
  position: relative;
  min-width: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: system-ui, "Helvetica Neue", Arial, sans-serif;
}

html {
  color-scheme: light dark;
}

body {
  min-height: 100svh;
  background-color: rgb(250 250 250);
}

img {
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
  shape-margin: 0.75rem;
  width: 100%;
  font-family: ui-serif;
  pointer-events: none;
  -moz-user-select: none;
  user-select: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  hanging-punctuation: first last;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
  color: rgb(7 7 7);
}

h1,
h2 {
  padding-bottom: 0.5rem;
}

h3,
h4 {
  padding-bottom: 0.375rem;
}

h5,
h6 {
  padding-bottom: 0.25rem;
}

h1 {
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 300;
}

h2 {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 500;
}

h3 {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
}

h4 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
}

h5 {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 800;
}

h6 {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 900;
}

h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child {
  padding-bottom: 0;
}

button,
a,
p {
  text-wrap: pretty;
}

p {
  max-width: 75ch;
  color: rgb(7 7 7 / 0.7);
}

address {
  font-style: unset;
}

input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: rgb(0 0 0);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: rgb(250 250 250);
  }

  p {
    color: rgb(250 250 250 / 0.7);
  }

  @media (pointer: fine) {
    body {
      background-color: rgb(10 10 10);
    }
  }
}

@media (prefers-reduced-motion) {
  [data-parallax] {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  :has(:target) {
    scroll-behavior: smooth;
    scroll-padding-top: 3.5rem;
  }
}
/* End Boilerplate */

/* Begin Page Styles */
.sticky {
  position: sticky;
}

.z-10 {
  z-index: 10;
}

.inset-x-0 {
  left: 0;
  right: 0;
}

.top-0 {
  top: 0;
}

.bottom-0 {
  bottom: 0;
}

.inline-block {
  display: inline-block;
}

.h-\[calc\(100dvh-1\.5rem\)\] {
  height: calc(100dvh - 1.5rem);
}

.w-\[calc\(50\%-1\.5rem\)\] {
  width: calc(50% - 1.5rem);
}

.mt-1\/2 {
  margin-top: 50%;
}

.plx-4 {
  padding-inline: 1rem;
}

.ply-3 {
  padding-block: 0.75rem;
}

.bg-yellow-50 {
  background-color: rgb(254 252 232);
}

.bg-green-50 {
  background-color: rgb(240 253 244);
}
/* End Page Styles */
<section>
  <img src="https://placehold.co/1200x600" alt="" class="z-10" />

  <div class="sticky bottom-0 inline-block h-[calc(100dvh-1.5rem)] w-[calc(50%-1.5rem)] plx-4 ply-3">
    <div class="plx-4 ply-3 bg-yellow-50">
      <h2>TEXT 1</h2>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porttitor purus sit amet dapibus eleifend. Sed vel erat quis leo vehicula ultrices. Pellentesque augue ipsum, molestie sed quam at, vestibulum viverra nisi. Nunc efficitur lorem sed lacus pellentesque facilisis. Nullam commodo, sapien ultrices dapibus interdum, lorem quam dictum risus, a commodo purus nisl quis mi. Integer vestibulum aliquet porttitor. Vestibulum auctor neque vitae ipsum varius dignissim. Nunc quis augue vel sapien auctor ultricies. Maecenas varius libero iaculis neque placerat, sit amet hendrerit purus condimentum. Aenean fringilla eros ac interdum commodo. Morbi scelerisque lorem ut nisl ornare, mattis efficitur sem aliquam. In hendrerit tempus lectus, eu tincidunt tellus volutpat in.</p>
    </div>
  </div>

  <div class='inline-block w-[calc(50%-1.5rem)] mt-1/2'>
    <div class="plx-4 ply-3 bg-green-50">
      <h2>TEXT 2</h2>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porttitor purus sit amet dapibus eleifend. Sed vel erat quis leo vehicula ultrices. Pellentesque augue ipsum, molestie sed quam at, vestibulum viverra nisi. Nunc efficitur lorem sed lacus pellentesque facilisis. Nullam commodo, sapien ultrices dapibus interdum, lorem quam dictum risus, a commodo purus nisl quis mi. Integer vestibulum aliquet porttitor. Vestibulum auctor neque vitae ipsum varius dignissim. Nunc quis augue vel sapien auctor ultricies. Maecenas varius libero iaculis neque placerat, sit amet hendrerit purus condimentum. Aenean fringilla eros ac interdum commodo. Morbi scelerisque lorem ut nisl ornare, mattis efficitur sem aliquam. In hendrerit tempus lectus, eu tincidunt tellus volutpat in.</p>
      <br>

      <p>Aenean ac nunc rutrum, sagittis dui pellentesque, malesuada lorem. Sed sed bibendum lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam eu neque neque. Fusce quis enim interdum, efficitur arcu at, dignissim turpis. Quisque bibendum risus nec tempus congue. Ut at libero ut ipsum venenatis dignissim id non purus. Vestibulum et bibendum dui, a sollicitudin lectus. Morbi mollis auctor risus at sodales.</p>
      <br>

      <p>Nullam elit velit, consectetur et pretium eget, dapibus in odio. Integer nec dignissim massa. Duis convallis tellus eu molestie ornare. Quisque dapibus ipsum et euismod laoreet. Suspendisse vulputate dui quis lacinia vehicula. Integer ac commodo ligula. Pellentesque at vehicula ligula. Mauris nec luctus nunc, id pharetra mauris. Aenean rhoncus orci quam, sit amet elementum tortor lobortis quis. Ut in scelerisque nisl.</p>
      <br>

      <p>Nullam elit velit, consectetur et pretium eget, dapibus in odio. Integer nec dignissim massa. Duis convallis tellus eu molestie ornare. Quisque dapibus ipsum et euismod laoreet. Suspendisse vulputate dui quis lacinia vehicula. Integer ac commodo ligula. Pellentesque at vehicula ligula. Mauris nec luctus nunc, id pharetra mauris. Aenean rhoncus orci quam, sit amet elementum tortor lobortis quis. Ut in scelerisque nisl.</p>
    </div>
  </div>
</section>

我希望这有帮助！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.