Question

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

从头开始，实现这种效果的最佳方法是什么？我已经设置了一个可以用于测试的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>

它还有一个投资组合滑块部分，如果它也适用于垂直幻灯片，那将是理想的。

感谢输入

Answer 1

当你到达about部分时，滚动不再控制页面，但该部分内容。

或者，滚动仍然可以控制页面，但是左侧面板动态地应用了position: fixed，直到窗口的滚动条向下滚动得足够远 - 在此之后position: fixed样式已删除，左侧面板已应用margin-top。

从头开始，实现此类型的最佳方法是什么效果？

通过滚动事件监听器跟踪窗口滚动条的垂直位置;
当滚动条到达某个y坐标时，动态地将position: fixed; top: 0;应用于左侧面板;
当滚动条到达第二个（下方）y坐标时，删除position样式声明并动态应用margin-top样式声明;
确保当页面向上滚动时，过程反过来：首先应用margin-top，然后删除并替换为position样式声明，最后，后者是也被删除了。

Answer 2

将来，它会像这样简单（你需要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

滚动控制页面内容

2 个答案: