Прокрутить контрольный контент страницы

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

В будущем, это будет так просто, как это (вы будете нуждаться в Firefox, Safari или хром с флагом включен для того, чтобы теперь работать)

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

Answer 2

, когда вы дойдете до около секции, прокручивать больше не контролирует страницы, но содержание в пределах этого раздела.

Альтернативно, свиток делает по-прежнему контролируют страницы, но левая панель не position: fixed применяется к нему динамически до полосы прокрутки окна прокручивается вниз достаточно далеко - после того, как этот момент position: fixed стиль удаляется и левая панель имеет вместо нее margin-top.

С нуля, что было бы лучшим способом достичь этого типа эффекта?

1. Отслеживайте вертикальное положение окна прокрутки через слушатель событий прокрутки;
2. Когда полоса прокрутки достигает определенной координаты y, динамически применяйте position: fixed; top: 0; к левой панели;
3. Когда полоса прокрутки достигает второй (нижней) y-координаты, удалите объявление стиля position и динамически примените объявление стиля margin-top;
4. Убедитесь, что при прокрутке страницы процесс происходит в обратном порядке: сначала применяется margin-top, затем удаляется и заменяется объявлением стиля position, а затем, наконец, последний также удаляется.