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

时间：2018-10-10 06:54:02

标签： javascript jquery html css

我正在尝试使用简单的HTML5和CSS来实现特定的布局，并尽可能少使用jQuery / JS，因为该网站必须具有高性能和轻便性。

在此站点中，我有两个单独的滚动区域。当用户首次开始向下滚动时，滚动区域1 向下滚动，固定内容区域保持固定在其右侧。当用户到达该滚动1区域的末尾时，滚动将按常规方式在文档正文（即滚动2区域）上继续滚动，其中固定的内容区域不再可见，该站点只会继续保持应有的状态。我已经在许多站点中看到了这一点，但我只是想不出所谓的内容或人们如何实现它。

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

关于如何入门的任何提示，提示和想法？

这是一张图片来说明：

enter image description here

2 个答案:

答案 0 :(得分：3)

创建仅限于页面垂直部分的固定侧边栏

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

答案 1 :(得分：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元素的高度是veiwport高度的两倍，并且由于position的{​​{1}}属性的值是.sidebar，它将保持固定不变，直到达到它的底部包含sticky元素。

相关问题
最新问题