两个单独的滚动区域简单的解决方案

Question

我有一个特定的布局，我试图使用简单的 HTML5 和 CSS 来完成，尽可能少的 jQuery/JS，因为网站必须是高性能和轻量级的。

在这个站点中，我有两个独立的滚动区域。当用户第一次开始向下滚动时，滚动区域 1 向下滚动，固定内容区域 保持固定在其右侧。当用户到达 滚动区域 1 的末尾时，滚动会在固定内容所在的文档正文（即 滚动区域 2）上继续正常滚动区域 不再可见，并且该站点继续按其应有的方式下降。我在很多网站上都看到过这个，但我就是不知道叫什么或者人们是如何完成它的。

同样，我们向下滚动区域 1 直到那里没有更多内容可显示，而 固定内容区域 保持在右侧并可见，然后滚动继续通过 滚动区域 2，我们不再需要显示固定内容。

关于如何开始的任何提示、提示和想法？

这里有一张图来说明：

Answer 1

创建一个限制在页面垂直部分的固定侧边栏

$(function() {
  if ($('.Scroller').length) {
    $(window).scroll(function() {
      var side = $('.Scroller');
      if ($(side).height() < window.innerHeight) {
        var top = $('.SectionWrap').offset().top,
          bottom = $('.SectionWrap').outerHeight() + top,
          maxY = bottom - $(side).outerHeight(),
          y = $(this).scrollTop() + 90; /*Extra padding for header menu*/
        if (y > top) { /*Scrolled past top of side bar*/
          if (y < maxY) { /*Scrolled past bottom of sidebar minus scroller height*/
            $(side).addClass('Active').removeAttr('style');
          } else {
            $(side).removeClass('Active').css({
              position: 'absolute',
              top: maxY - top - 10 + 'px' /*manual padding*/
            });
          }
        } else {
          $(side).removeClass('Active');
        }
      }
    });
  }
});

header {
  padding: 10px;
  background: #111;
  color: #aaa;
}

.PageWrap {
  display: flex;
}

.Section {
  border: 1px solid #aaa;
  padding: 10px;
  margin: 10px;
}

.SectionWrap {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #eee;
  flex: 0 0 200px;
  /*Sidebar width*/
}

.Scroller {
  width: 200px;
}

.Scroller.Active {
  position: fixed;
  top: 90px;
  /*Match script*/
}

.SideContent {
  display: flex;
  flex-direction: column;
  color: #333;
  font-size: 0.9em;
  padding: 10px;
}

footer {
  background: #111;
  height: 500px;
  /*Simulated*/
  width: 100%;
  padding: 30px;
  color: #aaa;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <h1>HEADER</h1>
</header>

<div class="PageWrap">

  <div class="PageContent">
    <div class="Section">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a lectus eget quam viverra tempor. Integer erat est, condimentum non massa vel, porta rutrum purus. Pellentesque venenatis nulla augue, eu auctor tortor sollicitudin vitae. Maecenas
        hendrerit justo at urna malesuada, eu elementum nibh porta. Vivamus accumsan magna elementum diam dapibus, eleifend bibendum metus dictum. Nulla blandit finibus risus, vitae tincidunt purus rutrum sed. Etiam nec justo tincidunt, sollicitudin lorem
        eget, dapibus odio. Curabitur molestie ac quam in iaculis. Nullam id egestas lorem. Nam sit amet neque sapien. Maecenas volutpat ante ligula, in efficitur augue efficitur eu. Nam sed sapien velit. Mauris eu dapibus orci. Vivamus elit nisi, porta
        id eros eu, semper malesuada nulla. Mauris id interdum nisi. Quisque sit amet sagittis augue.</p>

      <p>Curabitur a finibus libero. Morbi ut velit vitae est placerat laoreet. Donec at quam vestibulum neque volutpat porta quis vitae elit. Vestibulum dignissim commodo placerat. Aenean volutpat nunc in dolor viverra, vel dapibus tortor porta. Ut posuere
        urna sed metus mattis, in hendrerit enim tempor. Quisque porta ex quam, ut rutrum neque ultrices sit amet. Donec dictum nisl sollicitudin, elementum est non, ornare nisl.</p>
    </div>

    <div class="Section">
      <p>Nulla risus nunc, pharetra a odio a, dapibus pretium mauris. Phasellus placerat velit diam, nec aliquam augue iaculis eget. Quisque feugiat fringilla velit, quis rhoncus ex dignissim sed. Class aptent taciti sociosqu ad litora torquent per conubia
        nostra, per inceptos himenaeos. Aliquam mollis odio ac sapien laoreet aliquam. Curabitur euismod nibh lacus, ut fermentum ligula dictum quis. Maecenas auctor ex eros, ac commodo quam pharetra et. Nam fringilla sem sit amet ullamcorper hendrerit.
        Nulla facilisi. Morbi ut faucibus elit, vel mattis lorem. Sed mollis posuere gravida. Nunc sagittis sapien purus, non aliquet velit suscipit non. Sed ut orci fringilla, vehicula elit nec, rutrum nulla. Aenean cursus massa mi, eget laoreet quam
        aliquam sed. Duis eu pulvinar mauris. Curabitur ultrices vestibulum tellus, ac elementum orci dignissim ultrices.</p>
    </div>
  </div>

  <div class="SectionWrap">
    <div class="Scroller">
      <div class="SideContent">
        SECTION SIDE BAR
      </div>
    </div>
  </div>

</div>

<footer>
  FOOTER
</footer>

Answer 2

您可以设置元素的position 属性，当您滚动到sticky 的特定部分时，您希望该属性可见。 Per MDN web docs:

粘性定位元素是其计算位置值为粘性的元素。它被视为相对定位，直到其包含块在其流根（或其滚动的容器）内超过指定阈值（例如将 top 设置为 auto 以外的值），此时它被视为“卡住”，直到满足其包含块的相对边缘。

请注意，此属性值不受支持 in some browsers

请看下面的演示：

body {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  grid-gap: 50px;
  font-family: sans-serif;
}

.header, .footer {
  text-transform: uppercase;
  text-align: center;
  padding: 20px;
  color: white;
  background: firebrick;
}
.header::after, .footer::after {
  content: attr(class);
}

.main {
  display: grid;
  grid-template-columns: 300px 1fr;
  grid-gap: 50px;
}
.main__content {
  border-left: 1px solid black;
  padding: 20px;
}

.sidebar {
  background: aqua;
  height: min-content;
  padding: 20px;
}

p {
  margin-bottom: 2em;
  font-size: 1.5rem;
}

/* This is the code that makes the .sidebar visible while you scroll through the .main element*/
.sidebar--sticky {
  position: sticky;
  top: 0;
}

<header class="header"></header>
<main class="main">
  <aside class="sidebar sidebar--sticky">Hello I am the sidebar</aside>
  <section class="main__content">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, nisi perspiciatis labore minus at cumque eum aliquam harum voluptatem, suscipit vitae inventore iusto eaque animi similique quibusdam ratione reprehenderit? Fugit?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, nisi perspiciatis labore minus at cumque eum aliquam harum voluptatem, suscipit vitae inventore iusto eaque animi similique quibusdam ratione reprehenderit? Fugit?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, nisi perspiciatis labore minus at cumque eum aliquam harum voluptatem, suscipit vitae inventore iusto eaque animi similique quibusdam ratione reprehenderit? Fugit?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, nisi perspiciatis labore minus at cumque eum aliquam harum voluptatem, suscipit vitae inventore iusto eaque animi similique quibusdam ratione reprehenderit? Fugit?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, nisi perspiciatis labore minus at cumque eum aliquam harum voluptatem, suscipit vitae inventore iusto eaque animi similique quibusdam ratione reprehenderit? Fugit?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, nisi perspiciatis labore minus at cumque eum aliquam harum voluptatem, suscipit vitae inventore iusto eaque animi similique quibusdam ratione reprehenderit? Fugit?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, nisi perspiciatis labore minus at cumque eum aliquam harum voluptatem, suscipit vitae inventore iusto eaque animi similique quibusdam ratione reprehenderit? Fugit?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, nisi perspiciatis labore minus at cumque eum aliquam harum voluptatem, suscipit vitae inventore iusto eaque animi similique quibusdam ratione reprehenderit? Fugit?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, nisi perspiciatis labore minus at cumque eum aliquam harum voluptatem, suscipit vitae inventore iusto eaque animi similique quibusdam ratione reprehenderit? Fugit?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, nisi perspiciatis labore minus at cumque eum aliquam harum voluptatem, suscipit vitae inventore iusto eaque animi similique quibusdam ratione reprehenderit? Fugit?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, nisi perspiciatis labore minus at cumque eum aliquam harum voluptatem, suscipit vitae inventore iusto eaque animi similique quibusdam ratione reprehenderit? Fugit?</p>
  </section>
</main>
<footer class="footer"></footer>

它的工作原理是这样的，.sidebar 和 .main__content 元素都是 .main 元素的直接子元素，并且此元素的高度由其子元素的高度定义，在本例中为 .main__content 元素高度是视口高度的两倍，并且由于.sidebar 的position 属性的值是sticky，它将保持固定在视图中，直到它到达包含块的底部，即.main 元素。