javascript - 滚动控制页面内容

Question

这很难解释，但我正在寻找一个浏览器滚动条来控制网站内容。可以看到我所追求的一个很好的例子here正如您所看到的，当您到达关于部分时，滚动不再控制页面，而是控制该部分中的内容。我查看了代码，但它不是那么可靠。

从头开始，实现这种效果的最佳方法是什么？我设置了一点 JSFiddle可用于测试。它只包含一个包含相当多内容的基本部分。

<section id="hero" class="vertical-center">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1>
                    Some Title
                </h1>
            </div>
        </div>
         <div class="row">
            <div class="col-md-12">
                <p>
                "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
                </p>
                 <p>
                "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
                </p>
            </div>
        </div>
    </div>
</section>

它还有一个投资组合 slider 部分，如果它也可以与垂直幻灯片一起使用，那就太理想了。

感谢您的意见

Answer 1

在未来，它会像这样简单(你现在需要 firefox、safari 或 chrome 并启用标志才能工作)

body {
  margin: 0;
}
.sticky-titles {} .sticky-titles .pane {
  width: 100%;
  min-height: 100wh;
  display: flex;
}
.pane-half {
  width: 50%;
  min-height: 100vh;
  padding: 10px;
}
.pane .right {
  min-height: 150vh;
}
.pane .left {
  max-height: 100vh;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
.pane:nth-child(odd) .left {
  background: tomato;
}
.pane:nth-child(even) .left {
  background: #333;
  color: #CCC;
}
.pane:nth-child(odd) .right {
  background: #AFA;
}
.pane:nth-child(even) .right {
  background: #CCC;
  color: #333;
}

<div class="sticky-titles">
  <div class="pane">
    <div class="left pane-half">
      <h2>#1</h2>
    </div>
    <div class="right pane-half">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dictum interdum pellentesque. Vivamus dictum eleifend dui, a faucibus enim. Aenean iaculis hendrerit accumsan. Etiam non purus et neque ornare aliquet. Morbi bibendum libero vehicula
        arcu tristique, ac lacinia nisl faucibus. Phasellus tempor, velit id convallis fringilla, mauris ante tempor risus, ut cursus turpis nibh non eros. Integer quis quam ut felis hendrerit laoreet. Aenean pulvinar accumsan purus. Sed posuere arcu
        nunc, non aliquam quam bibendum id. Aenean nec massa sed purus varius tempus. Vivamus vitae neque rhoncus, accumsan magna ac, ullamcorper risus. Nam non ligula id ligula congue tristique. Phasellus tristique diam a lectus feugiat pretium. Aliquam
        ex magna, convallis nec mollis eget, lacinia dignissim purus. Etiam consectetur sit amet mauris quis pulvinar.
      </p>
    </div>
  </div>
  <div class="pane">
    <div class="left pane-half">
      <h2>#2</h2>
    </div>
    <div class="right pane-half">
      <p>
        Fusce consequat et sem a vestibulum. Donec dictum molestie nibh, ac ullamcorper justo sodales quis. Aliquam odio libero, efficitur vel ante non, dapibus viverra dui. Duis sollicitudin imperdiet nunc sed pretium. Duis sed elementum felis. Sed commodo hendrerit
        eros, vel consequat ipsum iaculis sit amet. Fusce tristique nisl ut felis tincidunt, vel dignissim purus mattis.
      </p>
    </div>
  </div>
  <div class="pane">
    <div class="left pane-half">
      <h2>#3</h2>
    </div>
    <div class="right pane-half">
      <p>
        Pellentesque cursus dapibus eros, sit amet aliquet felis bibendum nec. Duis pretium velit a enim lobortis, sit amet dignissim massa ultricies. Phasellus convallis erat tempus mi porta efficitur. Vivamus hendrerit lacus nunc, ac consectetur nulla auctor
        non. Duis quis ante nec est pharetra efficitur. Sed ultricies, metus sit amet porta porttitor, neque nulla suscipit dolor, et placerat ligula arcu id diam. Sed semper, neque blandit fermentum bibendum, nunc libero pellentesque elit, luctus tempor
        risus purus eu felis. Etiam leo arcu, egestas ut felis ut, rhoncus ultricies nulla. Nulla facilisi. Integer a nulla ligula. Phasellus porttitor orci a neque posuere pellentesque. Curabitur quam lacus, fermentum at eleifend eu, dapibus quis felis.
        Sed rutrum eget mauris sed porta. Mauris porttitor placerat mi, et cursus lectus commodo consectetur. Quisque tincidunt aliquam massa vel sagittis. Duis a sem tempus, cursus lectus sed, venenatis orci.
      </p>
    </div>
  </div>
</div>

目前很多地方还不能使用，但是随着人们越来越需要它，浏览器厂商肯定会接手它。可以关注支持here