質問編集履歴
3
HTMLにリンクjsの追記と、cssに追記しました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -34,6 +34,14 @@
|
|
|
34
34
|
|
|
35
35
|
```HTML
|
|
36
36
|
|
|
37
|
+
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
|
|
38
|
+
|
|
39
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>
|
|
40
|
+
|
|
41
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
|
|
37
45
|
<div id="wrap" class="onscroll">
|
|
38
46
|
|
|
39
47
|
|
|
@@ -90,6 +98,64 @@
|
|
|
90
98
|
|
|
91
99
|
```css
|
|
92
100
|
|
|
101
|
+
section{
|
|
102
|
+
|
|
103
|
+
position: relative;
|
|
104
|
+
|
|
105
|
+
z-index:1;
|
|
106
|
+
|
|
107
|
+
width:100%;
|
|
108
|
+
|
|
109
|
+
height: 100vh;
|
|
110
|
+
|
|
111
|
+
box-sizing:border-box;
|
|
112
|
+
|
|
113
|
+
overflow: hidden;
|
|
114
|
+
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
#section-1 {
|
|
120
|
+
|
|
121
|
+
opacity:0;
|
|
122
|
+
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
#section-1.visible {
|
|
126
|
+
|
|
127
|
+
opacity:1;
|
|
128
|
+
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.section-2 {
|
|
132
|
+
|
|
133
|
+
opacity: 1;
|
|
134
|
+
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.section-3 {
|
|
138
|
+
|
|
139
|
+
opacity: 1;
|
|
140
|
+
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.section-1 {
|
|
144
|
+
|
|
145
|
+
height: 100vh;
|
|
146
|
+
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
|
|
150
|
+
|
|
151
|
+
#section-1.on {
|
|
152
|
+
|
|
153
|
+
animation: fadeIn 1s;
|
|
154
|
+
|
|
155
|
+
animation-fill-mode: forwards;
|
|
156
|
+
|
|
157
|
+
}
|
|
158
|
+
|
|
93
159
|
#section-1.none {
|
|
94
160
|
|
|
95
161
|
position: absolute;
|
2
タイトルが途中で切れてしまってたため修正しました。
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
sectionごとに1ページスクロール（フェード切り替え）のサイトで最後のsectionだけ縦幅を可変にして
|
|
1
|
+
sectionごとに1ページスクロール（フェード切り替え）のサイトで最後のsectionだけ縦幅を可変にしてsectionの1番上にきた時さらに上にスクロールすると前のsectionに戻るようにしたい
|
test
CHANGED
|
File without changes
|
1
内容が少し違ったため修正しました。
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
sectionごとに1ページスクロール（フェード切り替え）のサイトで最後のsectionだけ縦幅を可変にした
|
|
1
|
+
sectionごとに1ページスクロール（フェード切り替え）のサイトで最後のsectionだけ縦幅を可変にして、sectionの1番上にきた時にさらに上にスクロールすると前のsectionに戻るようにし
|
test
CHANGED
|
@@ -6,7 +6,9 @@
|
|
|
6
6
|
|
|
7
7
|
上記のようにsectionごとに1ページスクロールをフェード切り替えし
|
|
8
8
|
|
|
9
|
-
最後のsectionを縦幅可変にしたTOPページを制作し
|
|
9
|
+
最後のsectionを縦幅可変にしたTOPページを制作しています。
|
|
10
|
+
|
|
11
|
+
縦幅可変にした最後のsectionでは、sectionの1番上にきた時にさらに上にスクロールすると前のsectionに戻るようにしたいのですが、section内の途中で上スクロールすると前のsectionに戻ってしまいます。
|
|
10
12
|
|
|
11
13
|
どなたかお優しい方のご回答をお待ちしております。
|
|
12
14
|
|
|
@@ -18,9 +20,9 @@
|
|
|
18
20
|
|
|
19
21
|
```
|
|
20
22
|
|
|
21
|
-
色々と試してsectionごとに1ページスクロールをフェード切り替えまではできた
|
|
23
|
+
色々と試してsectionごとに1ページスクロールをフェード切り替え＆最後のsectionを縦幅可変にするところまではできました。
|
|
22
|
-
|
|
24
|
+
|
|
23
|
-
最後のsection
|
|
25
|
+
最後のsectionの1番上にきた時にさらに上にスクロールすると前のsectionに戻るようにするところがどうしたらいいのか分かりません。
|
|
24
26
|
|
|
25
27
|
```
|
|
26
28
|
|