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

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

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

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

HTML

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

Q&A

解決済

1回答

5086閲覧

luxy.jsを入れた後も、メインコンテンツ一番上から表示したい

takumaro

総合スコア3

JavaScript

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

HTML

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

0グッド

0クリップ

投稿2020/06/18 06:57

Lhankor_Mhy さまにご教授いただいたソースを元に、
luxy慣性スクロールプラグインを入れてみたところ、

luxy.jsは効いているのですが、
メインコンテンツが一番上からはじまらずに下にずれて表示されてしまいます。
キレイに一番上から表示するにはどうすればよいでしょうか?

luxy.jsのほうもいろいろといじってみたのですがさっぱりわからずでした。。
またもっといいJSがある場合もご教授いただければ幸いです!
素人な私にどうかご教授の程どうぞよろしくお願いいたしますm(__)m

html

1 <div id="luxy"> 2  <header> 3 <img src="http://placehold.jp/150x150.png?text=カバーイメージ" alt=""> 4 </header> 5 </div> 6 <div class="main isCoverd"> 7 メインコンテンツここが一番上!<br> 8 メインコンテンツ<br> 9 メインコンテンツ<br> 10 メインコンテンツ<br> 11 メインコンテンツ<br> 12 メインコンテンツ<br> 13 メインコンテンツ<br> 14 メインコンテンツ<br> 15 メインコンテンツ<br> 16 メインコンテンツ<br> 17 メインコンテンツ<br> 18 メインコンテンツ<br> 19 メインコンテンツ<br> 20 メインコンテンツ<br> 21 メインコンテンツ<br> 22 メインコンテンツ<br> 23 メインコンテンツ<br> 24 メインコンテンツ<br> 25 メインコンテンツ<br> 26 メインコンテンツ<br> 27 メインコンテンツ<br> 28 メインコンテンツ<br> 29 メインコンテンツ<br> 30 メインコンテンツ<br> 31 メインコンテンツ<br> 32 メインコンテンツ<br> 33 メインコンテンツ<br> 34 メインコンテンツ<br> 35 メインコンテンツ<br> 36 メインコンテンツ<br> 37 メインコンテンツ<br> 38 メインコンテンツ<br> 39 メインコンテンツ<br> 40 メインコンテンツ<br> 41 メインコンテンツ<br> 42 メインコンテンツ<br> 43 メインコンテンツ<br> 44 メインコンテンツ<br> 45 メインコンテンツ<br> 46 メインコンテンツ<br> 47 メインコンテンツ<br> 48 メインコンテンツ<br> 49 メインコンテンツ<br> 50 メインコンテンツ<br> 51 メインコンテンツ<br> 52 メインコンテンツ<br> 53 メインコンテンツ<br> 54 メインコンテンツ<br> 55 メインコンテンツ<br> 56 メインコンテンツ<br> 57 メインコンテンツ<br> 58 メインコンテンツ<br> 59 メインコンテンツ<br> 60 メインコンテンツ<br> 61 メインコンテンツ<br> 62 メインコンテンツ<br> 63 メインコンテンツ<br> 64 メインコンテンツ<br> 65 メインコンテンツ<br> 66 メインコンテンツ<br> 67 メインコンテンツ<br> 68 メインコンテンツ<br> 69 メインコンテンツ<br> 70 メインコンテンツ<br> 71 メインコンテンツ<br> 72 メインコンテンツ<br> 73 メインコンテンツ<br> 74 メインコンテンツ<br> 75 メインコンテンツ<br> 76 メインコンテンツ<br> 77 メインコンテンツ<br> 78 メインコンテンツ<br> 79 メインコンテンツ<br> 80 メインコンテンツ<br> 81 メインコンテンツ<br> 82 メインコンテンツ<br> 83 メインコンテンツ<br> 84 メインコンテンツ<br> 85 メインコンテンツ<br> 86 メインコンテンツ<br> 87 メインコンテンツ<br> 88 メインコンテンツ<br> 89 メインコンテンツ<br> 90 メインコンテンツ<br> 91 メインコンテンツ<br> 92 メインコンテンツ<br> 93 メインコンテンツ<br> 94 メインコンテンツ<br> 95 メインコンテンツ<br> 96 メインコンテンツ<br> 97 </div> 98

css

1body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0} 2 3html{ 4 scroll-snap-type: y mandatory; 5 scroll-behavior: smooth; 6 scroll-snap-stop: always; 7} 8.isCovered .main{ 9 position: fixed; 10 z-index: -1; 11 top: 0; 12} 13header{ 14 display: flex; 15 width: 100%; 16 flex-flow: column; 17} 18.isCovered header::after{ 19 scroll-snap-align: end; 20 content: ""; 21 display: block; 22 width: 0; 23 height: 100vh; 24} 25header img{ 26 height: 100vh; 27 flex: 1 1 auto; 28 object-fit: cover; 29} 30.isCovered header img{ 31 scroll-snap-align: center; 32} 33

javascript

1const observer = new IntersectionObserver( 2 e => e[0].isIntersecting ? 3 document.body.classList.add('isCovered') : 4 document.body.classList.remove('isCovered') 5); 6 observer.observe(document.querySelector('header img')); 7 8/* 慣性スクロール luxy */ 9<script src="js/luxy.js" charset="utf-8"></script> 10 <script charset="utf-8"> 11 luxy.init(); 12 </script>

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

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

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

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

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

guest

回答1

0

ベストアンサー

ここが全角スペースになっているのが原因です。

html

1 <div id="luxy"> 2^ 3  <header> 4^ ^ 5 <img src="http://placehold.jp/150x150.png?text=カバーイメージ" alt=""> 6 </header> 7 </div> 8^

参考:
HTML - HTMLとCSSは全く同じコードでもスペースの有無でブラウザでの表示が変わるのでしょうか?|teratail

投稿2020/06/18 08:56

Lhankor_Mhy

総合スコア36960

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

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

takumaro

2020/06/18 09:48

いつも本当にありがとうございます。 早速チェックしてみたのですがやはりうまくいきません。 最初のheader imgが画面上に消えると、 main isCoverdがスクロールできず先頭で止まったままになってしまうのです。 もしよろしければお手すきのときで結構ですのでご確認いただけますと幸いです。 頼ってばかりで申し訳ございませんがどうぞよろしくお願いいたしますm(__)m
takumaro

2020/06/18 10:13

お忙しいところありがとうございますm(__)m 最初のカバーイメージをスクロールし終わると、 「メインコンテンツここが一番上!」という1行目からはじまらず、 真ん中くらいから表示されてしまうのです。 ご確認いただけますと幸いです。 どうぞよろしくお願いいたしますm(__)m
Lhankor_Mhy

2020/06/18 10:16

それは質問本文と全然違う内容ではないですか?
Lhankor_Mhy

2020/06/18 10:22

ああ、違うのか、そういうことなのか。 問題を把握しました。
Lhankor_Mhy

2020/06/18 10:31

luxy.jsのコードを読んでみましたが、解除用のメソッドがなかったので、これは対処が難しいと思います。 luxy.jsをお使いになるのであれば、初めから作り直した方が無難です。
takumaro

2020/06/18 10:31

ご面倒をおかけしてしまい申し訳ございません。 どうぞよろしくお願いいたしますm(__)m
takumaro

2020/06/18 10:33

ご教授いただきありがとうございます。 luxy.jsを作り直す技量はありませんので、 ないか良い方法はございませんでしょうか? なにかヒントでもいいので教えていただけるとありがたいですm(__)m
takumaro

2020/06/19 06:38

色々としていただき本当にありがとうございます。 大変勉強になりました! もっとたくさんいじって理解していきたいと思います。 今後ともどうぞよろしくお願いいたしますm(__)m
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問