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

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>

行動規範の内容に同意します

回答1件

ベストアンサー

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

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