質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

5064閲覧

ワンスクロールでスクロールし、途中からワンスクロールを解除するjsを作りたい

tanap

総合スコア11

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/03/27 06:34

前提・実現したいこと

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つ目のレイヤーに戻った時ワンスクロールの挙動をしません…。

ワンスクロールを実装するためのプラグインは複数ありましたが、
途中のレイヤーからワンスクロールを解除することができる仕様のものはありませんでした…

こちらの動作がどうしても行いたく、力を貸していただきたいです…
よろしくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

y_waiwai

2019/03/27 06:38

ワンスクロールとはなんのことでしょうか
tanap

2019/03/27 07:23 編集

各セクションが画面いっぱいに広がるページという意味です! これはプラグインのデモページなのですが、 イメージとしてはこのような感じです! https://projects.lukehaas.me/scrollify/
m.ts10806

2019/03/28 01:09

イメージしたそのままっぽいのがあるなら、自作せずサイトのHTML、CSS、JavaScriptを解析して(あるいはそのままコピペしてくる)というのもありです。 今回提示されたコードはそれらを解析した結果生まれたものですか?
tanap

2019/03/28 01:12

解析してみたのですが、 どちらのサイトもjs書き方が難しく、僕のレベルでは解析できませんでした…。 今回のコードは、こちらのコードを流用して作成したものです! https://teratail.com/questions/95658
m.ts10806

2019/03/28 01:14

昔の話ですが私は「とりあえず全部コピペして関係なさそうなところを削っていく」というのをひたすらやってました。 いきなり全部理解は難しいでしょうし、「ここが関係ある」を抜き出すのは熟練者でも至難です。ならば「ここは関係なさそう」というのを削っていった方がいいですし、さいあく、関係ないなら動作にも影響ないので放っといても「とりあえず導入してみたい」段階では問題にならないでしょう。
tanap

2019/03/28 01:34

なるほどです…。 今回は一旦コピペで対応してみます! アドバイスありがとうございます!
guest

回答1

0

topWindow < 500 のままなので、いくらやってもオフセット位置が500pxを超えたら判定文はfalseを返します。なので、ワンスクロールの高さが500ならば、startPos + 500としないといけないはずです。

js

1 2$(window).on('scroll', function() { 3 var topWindow = $(window).scrollTop(); 4 5 if((topWindow > startPos) && (topWindow < 500)){ //ここが問題! 6 goLink('#second'); 7 } 8 if( topWindow === 0){ 9 startPos = 0; 10 } else { 11 startPos = topWindow + 500; 12 } 13})

投稿2019/03/28 00:40

編集2019/03/28 00:41
FKM

総合スコア3608

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問