スクロールページの内容を制御する

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. スクロールバーが2番目（下位）のy座標に達すると、positionスタイル宣言を削除し、margin-topスタイル宣言を動的に適用します。
4. ページがスクロールアップされているときに、処理が逆に行われることを確認します。最初にmargin-topが適用されてから、削除されてpositionスタイル宣言に置き換えられ、最後に後者も削除されます。将来的には