时间戳

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

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

问题描述

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

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

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

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

这是一张图片来说明：

在此处输入图像描述

标签： javascriptjqueryhtmlcss

解决方案

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

$(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>

推荐阅读