前提・実現したいこと
https://teratail.com/questions/95658
↑上記ページの応用のような形で、
下記参考サイトのようなレイヤーが複数枚あるワンスクロールを作成したいです。
3つ目のレイヤーからはワンスクロールを解除し、普通にスクロールする仕様のものを実装したいと思っています。
現状のデモはコチラです。
◆参考サイト
https://www.shiftbrain.com/
https://mid-career.nyle.co.jp/
該当のソースコード
HTML
1<body> 2 <div id="wrap"> 3 4 <div id="first"> 5 <p>このエリアが次のエリアにワンスクロールでスクロールします。</p> 6 </div> 7 8 <div id="second"> 9 <p>このエリアが次のエリアにワンスクロールでスクロールします。</p> 10 </div> 11 12 <div id="third"> 13 <p>このエリアが次のエリアにワンスクロールでスクロールします。</p> 14 </div> 15 16 <div class="next"> 17 <p>次のエリアです。</p> 18 <p>次のエリアです。</p> 19 <p>次のエリアです。</p> 20 <p>次のエリアです。</p> 21 <p>次のエリアです。</p> 22 <p>次のエリアです。</p> 23 <p>次のエリアです。</p> 24 <p>次のエリアです。</p> 25 <p>次のエリアです。</p> 26 <p>次のエリアです。</p> 27 <p>次のエリアです。</p> 28 <p>次のエリアです。</p> 29 </div> 30 31 </div> 32</body>
CSS
1#first, #second, #third { 2 background-color: #333; 3 position: relative; 4 width: 100%; 5 height: 100vh; 6 text-align: center; 7} 8#first p, #second p, #third p { 9 position: absolute; 10 top: 50%; 11 left: 50%; 12 transform: translate(-50%, -50%); 13 -webkit-transform: translate(-50%, -50%); 14 -moz-transform: translate(-50%, -50%); 15 -ms-transform: translate(-50%, -50%); 16 -o-transform: translate(-50%, -50%); 17} 18 19#first { 20 color: #fff; 21 background-color: #333; 22} 23 24#second { 25 color: #333; 26 background-color: #fff; 27} 28 29#third { 30 color: #333; 31 background-color: #ddd; 32} 33 34#next { 35 background-color: #eee; 36 padding: 64px 0; 37} 38#next p { 39 margin-bottom: 240px; 40}
JavaScript
1$(function(){ 2 3 4//iPhoneで閲覧の縦幅調整 5var windowWidth = window.innerWidth; 6var windowheight = window.innerHeight; 7if (windowWidth <= 1024) { 8 $('#first_view').css('height', windowheight); 9} 10 11 12//ワンスクロール設定 13var startPos = 0; 14$(window).on('scroll', function() { 15 var topWindow = $(window).scrollTop(); 16 17 if((topWindow > startPos) && (topWindow < 500)){ 18 goLink('#second'); 19 } 20 if( topWindow === 0){ 21 startPos = 0; 22 } else { 23 startPos = topWindow + 500; 24 } 25}) 26 27 28//スムーススクロールfunction設定 29function goLink(href) { 30 "use strict"; 31 var target = $(href); 32 var position = target.offset().top; 33 $('body,html').animate({ 34 scrollTop: position 35 }, 600); 36} 37 38 39});
発生している問題・エラーメッセージ
2つ目のレイヤーにワンスクロールでスクロールすることはできるのですが、
3つ目、4つ目のレイヤーまでワンスクロールの実装が出来ない状況です…。
また、1つ目のレイヤーから2つ目のレイヤーにスクロールした時は正常に動作するのですが、
2つ目のレイヤーから1つ目のレイヤーに戻った時ワンスクロールの挙動をしません…。
ワンスクロールを実装するためのプラグインは複数ありましたが、
途中のレイヤーからワンスクロールを解除することができる仕様のものはありませんでした…
こちらの動作がどうしても行いたく、力を貸していただきたいです…
よろしくお願い致します。