teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

ソースコードを追加しました

2019/12/10 02:18

投稿

nyoro
nyoro

スコア16

title CHANGED
File without changes
body CHANGED
@@ -4,4 +4,118 @@
4
4
 
5
5
  それと、現在`position: sticky;` を使用して押し出される動きを付けているのですが、このプロパティがIE11に対応していません。
6
6
  どうしても対応させたく様々なプラグインを試してみたのですが、挙動がおかしくなってしまったので、`position: sticky;`を使用しないで押し出される方法にしたいです。
7
- なるべく自分で考えようと思い、`positon: relative;`と`positon: fixed;`をjsで制御させて実装しようと思ったのですが、上手くできなかったので、こちらで質問させて頂きます。(質問丸投げになってしまい、申し訳ありません。。)
7
+ なるべく自分で考えようと思い、`positon: relative;`と`positon: fixed;`をjsで制御させて実装しようと思ったのですが、上手くできなかったので、こちらで質問させて頂きます。(質問丸投げになってしまい、申し訳ありません。。)
8
+
9
+ ```html
10
+ <div class="container">
11
+ <div class="cont1">
12
+ <div class="drop-img drop-img2">
13
+ <img src="https://dl.dropbox.com/s/rkox4afc0kmkfj1/drop.png?dl=0" alt="">
14
+ <p class="drop-year">
15
+ 2019
16
+ </p>
17
+ </div>
18
+ </div>
19
+ <div class="cont2">
20
+ <div class="drop-img drop-img3">
21
+ <img src="https://dl.dropbox.com/s/rkox4afc0kmkfj1/drop.png?dl=0" alt="">
22
+ <p class="drop-year">
23
+ 2018
24
+ </p>
25
+ </div>
26
+ </div>
27
+ <div class="cont3">
28
+ <div class="drop-img">
29
+ <img src="https://dl.dropbox.com/s/rkox4afc0kmkfj1/drop.png?dl=0" alt="">
30
+ <p class="drop-year">
31
+ 2017
32
+ </p>
33
+ </div>
34
+ </div>
35
+ <div class="cont4">
36
+ <div class="drop-img">
37
+ <img src="https://dl.dropbox.com/s/rkox4afc0kmkfj1/drop.png?dl=0" alt="">
38
+ <p class="drop-year">
39
+ 2016
40
+ </p>
41
+ </div>
42
+ </div>
43
+ </div>
44
+ ```
45
+ ```css
46
+ .container {
47
+ position: relative;
48
+
49
+ &::before {
50
+ content: '';
51
+ position: absolute;
52
+ left: 0;
53
+ right: 0;
54
+ background: #00a0e9;
55
+ width: 3px;
56
+ height: 100%;
57
+ margin: auto;
58
+ }
59
+ }
60
+
61
+ .drop {
62
+ &-img {
63
+ position: sticky;
64
+ top: 45%;
65
+ text-align: center;
66
+ right: 0;
67
+ left: 0;
68
+
69
+ img {
70
+ width: 80px;
71
+ }
72
+ }
73
+
74
+ &-year {
75
+ position: absolute;
76
+ color: #fff;
77
+ left: 0;
78
+ right: 0;
79
+ top: 20px;
80
+ }
81
+ }
82
+
83
+ .cont1 {
84
+ background: #FFDEFF;
85
+ height: 600px;
86
+ text-align: center;
87
+ }
88
+
89
+ .cont2 {
90
+ background: #DEFFFF;
91
+ height: 600px;
92
+ text-align: center;
93
+ }
94
+
95
+ .cont3 {
96
+ background: #FFFFDE;
97
+ height: 600px;
98
+ text-align: center;
99
+ }
100
+
101
+ .cont4 {
102
+ background: #C7FFC7;
103
+ height: 600px;
104
+ text-align: center;
105
+ }
106
+
107
+ ```
108
+ ```js
109
+ $(function() {
110
+ $(window).scroll(function() {
111
+ var wH = $(window).height();
112
+ var dropH = $('.drop-img').offset().top;
113
+
114
+ if ( dropH < $(window).scrollTop() + (wH/2)) {
115
+ $('.drop-img').children('img').attr('src', 'https://dl.dropbox.com/s/ns0be5m1vp0611t/drop_gray.png?dl=0');
116
+ } else {
117
+ $('.drop-img').children('img').attr('src', 'https://dl.dropbox.com/s/rkox4afc0kmkfj1/drop.png?dl=0');
118
+ }
119
+ })
120
+ });
121
+ ```

1

urlをクリックでジャンプできるようにした

2019/12/10 02:18

投稿

nyoro
nyoro

スコア16

title CHANGED
File without changes
body CHANGED
@@ -1,4 +1,4 @@
1
- https://codepen.io/yutas01/pen/povgqez
1
+ [https://codepen.io/yutas01/pen/povgqez](https://codepen.io/yutas01/pen/povgqez)
2
2
 
3
3
  上記のURLにソースがあるのですが、それぞれの水玉が下の水玉に押し出され、画面の半分以上上に来たら灰色に変化するという動きを実装したいのですが、少しスクロールしただけで全ての水玉が灰色になってしまいます。どのような記述をすればよいのでしょうか。
4
4