老师，滚动滚动条时，每个屏幕都没有动画效果，然后导航栏也没有一直在顶部是怎么回事

老师，滚动滚动条时，每个屏幕都没有动画效果，然后导航栏也没有一直在顶部是怎么回事

代码顺序为：index.html、index.js、test.js、animate.css、index.css，麻烦老师帮忙看看哪里出了问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html>
<head>
    <title>个人网页</title>
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link rel="stylesheet" type="text/css" href="css/animate.css">
</head>
<body>
    <!-- 头部 -->
    <header class="header">
        <div class="header__wrap">
            <div class="header__logo">慕课手机</div>
            <nav class="header__nav">
            <!-- 点击不会有触发 -->
            <a href="javascript:;" class="header__nav-item header__nav-item_status_active">首页</a>
            <a href="javascript:;" class="header__nav-item">外观</a>
            <a href="javascript:;" class="header__nav-item">配置</a>
            <a href="javascript:;" class="header__nav-item">型号</a>
            <a href="javascript:;" class="header__nav-item">说明</a>
            <a href="javascript:;" class="header__nav-item header__nav-item_custom_button">立即购买</a>
        </nav>
        </div>
    </header>
    <!-- 第一屏 -->
    <div class="screen-1">
        <!-- 文字 -->
        <h2 class="screen-1__heading"><b>慕课手机</b>让你的生活更精彩</h2>
        <!-- 手机 -->
        <div class="screen-1__phone"></div>
        <!-- 阴影 -->
        <div class="screen-1__shadow"></div>
    </div>
    <!-- 第二屏 -->
    <div class="screen-2">
        <!-- 文字 -->
        <h2 class="screen-2__heading">优美的设计，更令人着迷</h2>
        <h3 class="screen-2__subheading">采用最受欢迎的设计，让它更加出色。<br/>款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。</h3>
        <!-- 手机 -->
        <div class="screen-2__phone">
            <div class="screen-2__point screen-2__point_i_1">高清摄像</div>
            <div class="screen-2__point screen-2__point_custom_right screen-2__point_i_2">超薄机身</div>
            <div class="screen-2__point screen-2__point_custom_right screen-2__point_i_3">大屏显示</div>
        </div>
    </div>
    <!-- 第三屏 -->
    <div class="screen-3">
        <div class="screen-3__wrap">
            <!-- 文字 -->
            <h2 class="screen-3__heading">外形小巧，功能强大的手机</h2>
            <h3 class="screen-3__subheading">采用最受欢迎的设计，让它更加出色。<br/>款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。</h3>
            <!-- 手机 -->
            <div class="screen-3__phone"></div>
            <div class="screen-3__features">
                <div class="screen-3__features__item">
                    <div class="screen-3__features__item__number">5.7</div>
                    <div class="screen-3__features__item__desc">英寸大屏</div>
                </div>
                <div class="screen-3__features__item">
                    <div class="screen-3__features__item__number">1200</div>
                    <div class="screen-3__features__item__desc">万像素</div>
                </div>
                <div class="screen-3__features__item">
                    <div class="screen-3__features__item__number">3D</div>
                    <div class="screen-3__features__item__desc">touch</div>
                </div>
                <div class="screen-3__features__item">
                    <div class="screen-3__features__item__number">A9</div>
                    <div class="screen-3__features__item__desc">处理器</div>
                </div>
            </div>
        </div>
    </div>
    <!-- 第四屏 -->
    <div class="screen-4">
        <div class="screen-4__wrap">
            <!-- 文字 -->
            <h2 class="screen-4__heading">丰富的手机型号</h2>
            <h3 class="screen-4__subheading">找到适合你的手机</h3>
 
            <div class="screen-4__type">
                <div class="screen-4__type__item screen-4__type__item_i_1">
                    <div class="screen-4__type__item__color">慕课红</div>
                    <div class="screen-4__type__item__storage">16G/32G/64G</div>
                </div>
 
                <div class="screen-4__type__item screen-4__type__item_i_2">
                    <div class="screen-4__type__item__color">土豪金</div>
                    <div class="screen-4__type__item__storage">16G/32G/64G</div>
                </div>
 
                <div class="screen-4__type__item screen-4__type__item_i_3">
                    <div class="screen-4__type__item__color">太空灰</div>
                    <div class="screen-4__type__item__storage">16G/32G/64G</div>
                </div>
 
                <div class="screen-4__type__item screen-4__type__item_i_4">
                    <div class="screen-4__type__item__color">绅士黑</div>
                    <div class="screen-4__type__item__storage">16G/32G/64G</div>
                </div>
            </div>
        </div>
    </div>
    <!-- 第五屏 -->
    <div class="screen-5">
            <!-- 文字 -->
            <h2 class="screen-5__heading">游戏、学习、拍照、有这一部就够了</h2>
            <h3 class="screen-5__subheading">看视频、拍摄高清视频与照片、视频聊天、一机多功能，让您的生活更丰富精彩</h3>
            <div class="screen-5__bg"></div>
    </div>
    <div class="screen-buy">
        <a class="screen-buy__button" href="javascript:;">立即购买</a>
    </div>
    <!-- 底部 -->
    <footer class="footer">
        © 2016 imooc.com   京ICP备13046642号
    </footer>
    <!-- 导航侧边栏 -->
    <div class="outline">
        <a href="javascript:;" class="outline__item outline__item_status_active">首页</a>
        <a href="javascript:;" class="outline__item">外观</a>
        <a href="javascript:;" class="outline__item">配置</a>
        <a href="javascript:;" class="outline__item">型号</a>
        <a href="javascript:;" class="outline__item">说明</a>
    </div>
    <script type="text/javascript" src="js/test.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
//获取元素
var getElem = function(selector){
    return document.querySelector(selector);
}
 
var getAllElem = function(selector){
    return document.querySelector(selector);
}
 
// 获取元素样式
var getCls = function(element){
    return element.getAttribute('class');
}
// 设置元素样式
var setCls = function(element , cls){
    return element.setAttribute('class' , cls);
}
// 为元素添加样式
var addCls = function(element , cls){
    var baseCls = getCls(element);
    // 如果没有找到这个样式，就加一个
    if( baseCls.indexOf(cls) === -1){
        setCls( element , baseCls+' '+cls);
    }
}
// 为元素删除样式
var delCls = function(element , cls){
    var baseCls = getCls(element);
    //如果能找到这个样式，就删除
    if( baseCls.indexOf(cls) != -1){
        setCls( element , baseCls.split(cls).join(' ') .replace(/\s+/g,' '));
    }
}
// 页面载入完成后，所有动画元素设置_animate_init
// 第一步：初始化样式 init
var screenAnimateElements = {
    // 每屏动画
    '.screen-1' : [
        '.screen-1__heading',
        '.screen-1__phone',
        '.screen-1__shadow',
    ],
    '.screen-2' : [
        '.screen-2__heading',
        '.screen-2__subheading',
        '.screen-2__phone',
        '.screen-2__point_i_1',
        '.screen-2__point_i_2',
        '.screen-2__point_i_3',
    ],
    '.screen-3' : [
        '.screen-3__heading',
        '.screen-3__phone',
        '.screen-3__subheading',
        '.screen-3__features',
    ],
    '.screen-4' : [
        '.screen-4__heading',
        '.screen-4__subheading',
        '.screen-4__type__item_i_1',
        '.screen-4__type__item_i_2',
        '.screen-4__type__item_i_3',
        '.screen-4__type__item_i_4',
    ],
    '.screen-5' : [
        '.screen-5__heading',
        '.screen-5__subheading',
        '.screen-5__bg',
    ],
};
// 把某个屏幕上有动画样式的都设为init
//设置屏内元素为初始状态
var setScreenAnimateInit = function(screenCls){
    var screen = document.querySelector(screenCls);//获取当前屏的元素
    var animateElements = screenAnimateElements[screenCls];//需要设置动画的元素
    for(var i=0; i<animateElements.length; i++){
        var element = document.querySelector(animateElements[i]);
        var baseCls = element.getAttribute('class');
        element.setAttribute('class',baseCls +' '+animateElements[i].substr(1)+'_animate_init');
    }
}
// 设置播放屏内的元素动画
var playScreenAnimateDone = function(screenCls){
    var screen = document.querySelector(screenCls);//获取当前屏的元素
    var animateElements = screenAnimateElements[screenCls];//需要设置动画的元素
    for(var i=0; i<animateElements.length; i++){
        var element = document.querySelector(animateElements[i]);
        var baseCls = element.getAttribute('class');
        element.setAttribute('class',baseCls.replace('_animate_init','_animate_done'));
    }
}
window.onload = function(){
    console.log('onload');
    // 每一屏动画
    for(k in screenAnimateElements){
        setScreenAnimateInit(k);
    }
}
// 第二步：滚动到哪里，就播放到哪里
window.onscroll = function(){
    var top = document.body.scrollTop;
    console.log(top);
    if(top > 80){
        addCls(getElem('.header') , 'header_status_back');
    }else{
        delCls(getElem('.header') , 'header_status_back');
    }
 
    // 滚动条大于800时要让第一屏播放
    if(top > 1){
        playScreenAnimateDone('.screen-1');
    }
    if(top > 800*1){
        playScreenAnimateDone('.screen-2');
    }
    if(top > 800*2){
        playScreenAnimateDone('.screen-3');
    }
    if(top > 800*3){
        playScreenAnimateDone('.screen-4');
    }
    if(top > 800*4){
        playScreenAnimateDone('.screen-5');
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
// 将有动画效果的放一起
var screenAnimateElements = {
    // 每屏动画
    '.screen-1' : [
        '.screen-1__heading',
        '.screen-1__phone',
        '.screen-1__shadow',
    ],
    '.screen-2' : [
        '.screen-2__heading',
        '.screen-2__subheading',
        '.screen-2__phone',
        '.screen-2__point_i_1',
        '.screen-2__point_i_2',
        '.screen-2__point_i_3',
    ],
    '.screen-3' : [
        '.screen-3__heading',
        '.screen-3__phone',
        '.screen-3__subheading',
        '.screen-3__features',
    ],
    '.screen-4' : [
        '.screen-4__heading',
        '.screen-4__subheading',
        '.screen-4__type__item_i_1',
        '.screen-4__type__item_i_2',
        '.screen-4__type__item_i_3',
        '.screen-4__type__item_i_4',
    ],
    '.screen-5' : [
        '.screen-5__heading',
        '.screen-5__subheading',
        '.screen-5__bg',
    ],
};
 
 
// 设置当前屏幕的样式
function setScreenAnimate(screenCls){
    var screen = document.querySelector(screenCls);//获取当前屏的元素
    var animateElements = screenAnimateElements[screenCls];//需要设置动画的元素
    //测试是否有初始化子元素的样式
    var isSetAnimateClass = false;
    //当前屏幕下所有子元素的状态是DONE？
    var isAnimateDone = false;
    screen.onclick = function(){
        // 初始化样式，增加init（A A_init）
        if( isSetAnimateClass === false){
            for(var i=0; i<animateElements.length; i++){
                var element = document.querySelector(animateElements[i]);
                var baseCls = element.getAttribute('class');
                element.setAttribute('class',baseCls +' '+animateElements[i].substr(1)+'_animate_init');
            }
            isSetAnimateClass = true;
            return ;
        }
        //切换所有的 AnimateElements 的 init ——> done （A A_done）
        if( isAnimateDone === false){
            for(var i=0; i<animateElements.length; i++){
                var element = document.querySelector(animateElements[i]);
                var baseCls = element.getAttribute('class');
                element.setAttribute('class',baseCls.replace('_animate_init','_animate_done'));
            }
            isAnimateDone = true;
            return ;
        }
        //切换所有的 AnimateElements 的 done ——> init （A A_init）
        if( isAnimateDone === true){
            for(var i=0; i<animateElements.length; i++){
                var element = document.querySelector(animateElements[i]);
                var baseCls = element.getAttribute('class');
                element.setAttribute('class',baseCls.replace('_animate_done','_animate_init'));
            }
            isAnimateDone = false;
            return ;
        }
    }
}
// 每一屏动画
for(k in screenAnimateElements){
    setScreenAnimate(k);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
/*第一屏文字内容*/
/*第一屏文字*/
.screen-1__shadow,
.screen-1__phone,
.screen-1__heading{
    transition: all 1s;
}
.screen-1__heading_animate_init{
    opacity: 0;
    transform: translate(0,100%);
}
.screen-1__shadow_animate_done,
.screen-1__phone_animate_done,
.screen-1__heading_animate_done{
    opacity: 1;
    transform: translate(0,0);
}
/*第一屏手机*/
.screen-1__phone_animate_init{
    opacity: 0;
    transform: translate(0,-100%);
}
/*第一屏手机阴影*/
.screen-1__shadow_animate_init{
    opacity: 0;
    transform: translate(0,100%);
}
 
/*第二屏动画*/
.screen-2__subheading,
.screen-2__phone,
.screen-2__heading{
    transition: all 1s;
}
.screen-2__heading_animate_init{
    opacity: 0;
    transform: translate(0,-100%);
}
.screen-2__subheading_animate_init{
    opacity: 0;
    transform: translate(0,100%);
}
.screen-2__phone_animate_init{
    opacity: 0;
    transform: translate(0,50%);
}
.screen-2__phone_animate_done,
.screen-2__subheading_animate_done,
.screen-2__heading_animate_done{
    opacity: 1;
    transform: translate(0,0);
}
.screen-2__point{
    transition: all 1s 1s;
}
.screen-2__point_done{
    opacity: 1;
    transform: translate(0,0);
}
.screen-2__point_i_1_animate_init{
    opacity: 0;
    transform: translate(-100%,0);
}
.screen-2__point_i_3_animate_init,
.screen-2__point_i_2_animate_init{
    opacity: 0;
    transform: translate(100%,0);
}
/*第三屏动画*/
.screen-3__features,
.screen-3__subheading,
.screen-3__phone,
.screen-3__heading{
    transition: all 1s;
}
.screen-3__phone_animate_done,
.screen-3__subheading_animate_done,
.screen-3__heading_animate_done{
    opacity: 1;
    transform: translate(0,0);
}
 
.screen-3__heading_animate_init{
    opacity: 0;
    transform: translate(0,-100%);
}
.screen-3__phone_animate_init,
.screen-3__subheading_animate_init{
    opacity: 0;
    transform: translate(0,100%);
}
.screen-3__features_animate_init{
    opacity: 0;
    transform: scale(.5);
}
.screen-3__features_animate_done{
    opacity: 1;
    transform: scale(1);
}
.screen-3__features__item{
    transition: all .5s;
    cursor: pointer;
}
.screen-3__features__item:hover{
    transform: scale(1.1);
    border-color: #fff;
}
/*第四屏动画*/
.screen-4__subheading,
.screen-4__heading{
    transition: all 1s;
}
.screen-4__heading_animate_init{
    opacity: 0;
    transform: translate(0,-100%);
}
.screen-4__subheading_animate_init{
    opacity: 0;
    transform: translate(0,100%);
}
.screen-4__type__item_i_1{
    transition: all 1s .5s;
}
.screen-4__type__item_i_2{
    transition: all 1s 1s;
}
.screen-4__type__item_i_3{
    transition: all 1s 1.5s;
}
.screen-4__type__item_i_4{
    transition: all 1s 2s;
}
 
.screen-4__type__item_i_1_animate_init,
.screen-4__type__item_i_2_animate_init,
.screen-4__type__item_i_3_animate_init,
.screen-4__type__item_i_4_animate_init{
    opacity: 0;
}
.screen-4__type__item_i_1_animate_done,
.screen-4__type__item_i_2_animate_done,
.screen-4__type__item_i_3_animate_done,
.screen-4__type__item_i_4_animate_done{
    opacity: 1;
}
/*第五屏动画*/
.screen-5__bg,
.screen-5__subheading,
.screen-5__heading{
    transition: all 1s;
}
.screen-5__heading_animate_init{
    opacity: 0;
    transform: translate(0,-100%);
}
.screen-5__bg_animate_init,
.screen-5__subheading_animate_init{
    opacity: 0;
    transform: translate(0,100%);
}
 
 
/*定义帧动画*/
@-webkit-keyframes bounce {
    0%,100% {
        transform: scale(0);
    }
    50% {
        transform: scale(1);
    }
}
/*给第二屏的手机介绍使用帧动画*/
.screen-2__point:before,
.screen-2__point:after{
    content: ' ';
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 1px;
    left: 0px;
    background-color: rgba(255,0,0,0.4);
    border-radius: 50%;
    -webkit-animation: bounce 2s infinite;
}
 
.screen-2__point:before{
    -webkit-animation: bounce 2s infinite 1s;
}
.screen-2__point_i_1:after,
.screen-2__point_i_1:before{
    left: 200px;
}
/*导航条 _status_back 样式*/
.header{
    transition: all 1s;
}
.header_status_back{
    background-color: rgba(0,0,0,.5);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
}
.header_status_back .header__logo,
.header_status_back .header__nav-item{
    color: #fff;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
/*
BEM设计模式
模块（没有前缀，多个单词用“-”连接）
元素（元素在模块之后，可以有多个层级，以__连接）
修饰（某元素、或某模块特别的状态，必须有一个状态名和状态值，使用_连接）
*/
/*头部*/
.header{
    background-color: #f7f7f7;
}
/*包含内容*/
.header__wrap{
    height: 80px;
    width: 1200px;
    position: relative;
    margin: 0 auto;
}
/*logo*/
.header__logo{
    width: 100px;
    height: 38px;
    line-height: 38px;
    font-size: 20px;
    color: #07111b;
    padding-left: 50px;
    background:url('../img/logo.png') left center no-repeat;
    background-size: 38px 38px;
    position: absolute;
    top:50%;
    margin-top: -19px;
    left: 20px;
}
/*导航*/
.header__nav{
    position: absolute;
    right: 20px;
    height: 38px;
    top: 50%;
    margin-top: -19px;
}
/*导航内元素*/
.header__nav-item{
    color: #292f35;
    font-size: 14px;
    display: block;
    height: 38px;
    line-height: 38px;
    float: left;
    margin-left: 40px;
    position: relative;
}
/*鼠标移入导航文字变红*/
.header__nav-item:hover{
    color: #f01400;
}
/*状态与状态值*/
.header__nav-item_status_active{
    color: #f01400;
}
/*导航的下划线*/
.header__nav-item_status_active::after{
    content:' ';
    display: block;
    width: 100%;
    height: 2px;
    position: absolute;
    background-color: #f01400;
    left: 0;
    bottom: 0;
}
/*导航条上的按钮*/
.header__nav-item_custom_button{
    background: #000;
    color: #f4f4f5;
    text-align: center;
    width: 90px;
    border-radius: 3px;
}
/*第一屏*/
.screen-1{
    height: 800px;
    background-color: #e7e7e7;
    background:url(../img/bg-screen-1.png) no-repeat center;
    position: relative;
    overflow: hidden;
    background:url(../img/bg-screen-1.png) no-repeat center;
    /*让背景图撑满整个屏*/
    background-size: cover;
}
/*文字内容*/
.screen-1__heading{
    font-weight: normal;
    margin:0;
    padding: 0;
    font-size: 46px;
    color: #4d555d;
    text-align: center;
    padding-top: 152px;
}
.screen-1__heading b{
    color: #f01400;
    font-weight: normal;
}
/*手机*/
.screen-1__phone{
    width: 1375px;
    height: 305px;
    background:url(../img/screen-1-phone.png) no-repeat center;
    position: absolute;
    left: 50%;
    margin-left: -687px;
    bottom: 180px;
    z-index: 2;
}
/*阴影*/
.screen-1__shadow{
    width: 1233px;
    height: 411px;
    background:url(../img/screen-1-shadow.png) no-repeat center;
    position: absolute;
    left: 50%;
    margin-left: -616px;
    bottom: 30px;
    z-index: 1;
    opacity: .8;
}
/*第二屏*/
.screen-2{
    height: 800px;
    background-color: #fafafa;
    position: relative;
    overflow: hidden;
}
/*大标题*/
.screen-2__heading{
    font-weight: normal;
    margin:0;
    padding: 0;
    font-size: 46px;
    line-height: 46px;
    color: #f01400;
    text-align: center;
    padding-top: 96px;
}
/*子标题*/
.screen-2__subheading{
    font-weight: normal;
    margin:0;
    padding: 0;
    font-size: 14px;
    color: #2c3137;
    text-align: center;
    padding-top: 25px;
    line-height: 28px;
}
/*手机*/
.screen-2__phone{
    width: 928px;
    height: 873px;
    background:url(../img/screen-2-phone.png) no-repeat center;
    position: absolute;
    left: 50%;
    margin-left: -464px;
    bottom: -345px;
    z-index: 2;
}
/*手机描述*/
.screen-2__point{
    width: 108px;
    height: 22px;
    padding-right: 112px;
    font-size: 22px;
    line-height: 22px;
    color: #4d555d;
    position: absolute;
    background:url(../img/icon-point-right.png) no-repeat center right;
}
.screen-2__point_custom_right{
    padding:0 0 0 112px;
    background:url(../img/icon-point-left.png) no-repeat center left;
}
/*手机描述位置*/
.screen-2__point_i_1{
    top: 150px;
    left: -164px;
}
.screen-2__point_i_2{
    top: 30px;
    right: 130px;
}
.screen-2__point_i_3{
    top: 330px;
    right: 30px;
}
/*第三屏*/
.screen-3{
    height: 800px;
    background-color: red;
    position: relative;
    overflow: hidden;
    background:url(../img/bg-screen-3.png) no-repeat center;
    /*让背景图撑满整个屏*/
    background-size: cover;
}
/*第三屏容器*/
.screen-3__wrap{
    width: 1200px;
    height: auto;
    margin: 0 auto;
    position: relative;
}
/*大标题*/
.screen-3__heading{
    font-size: 46px;
    line-height: 46px;
    color: #fff;
    text-align: left;
    padding-top: 94px;
}
/*子标题*/
.screen-3__subheading{
    font-size: 14px;
    color: #fff;
    text-align: left;
    padding-top: 25px;
    line-height: 28px;
}
/*手机*/
.screen-3__phone{
    width: 750px;
    height: 873px;
    background:url(../img/screen-3-phone.png) no-repeat center top;
    position: absolute;
    right: 0;
    top: 195px;
    z-index: 2;
}
/*左侧内容*/
.screen-3__features{
    position: absolute;
    top: 395px;
    left: 0;
    width: 320px;
    height: 280px;
}
.screen-3__features__item{
    width: 138px;
    height: 118px;
    border: 1px solid #cb7173;
    margin: 0 20px 20px 0;
    float: left;
    border-radius: 3px;
    color: #fff;
    text-align: center;
}
.screen-3__features__item__number{
    height: 36px;
    font-size: 36px;
    line-height: 36px;
    padding: 28px 0 8px;
}
.screen-3__features__item__desc{
    height: 14px;
    font-size: 14px;
    line-height: 14px;
}
/*第四屏*/
.screen-4{
    height: 800px;
    background-color: #fff;
    position: relative;
    overflow: hidden;
}
.screen-4__wrap{
    width: 1200px;
    height: auto;
    margin: 0 auto;
    position: relative;
}
/*大标题*/
.screen-4__heading{
    font-size: 46px;
    line-height: 46px;
    color: #f01400;
    text-align: center;
    padding-top: 135px;
}
/*子标题*/
.screen-4__subheading{
    font-size: 14px;
    color: #464a4f;
    text-align: center;
    padding-top: 29px;
    line-height: 28px;
}
/*手机型号*/
.screen-4__type{
    width: 1260px;
    height: 270px;
    position: absolute;
    top: 304px;
    margin-left: 30px;
}
/*单个手机*/
.screen-4__type__item{
    width: 220px;
    margin-right: 90px;
    height: 270px;
    float: left;
    position: relative;
    text-align: center;
    background-size: cover;
}
/*手机描述*/
.screen-4__type__item__color{
    width: 100%;
    height: 14px;
    line-height: 14px;
    font:14px;
    color: #2c3238;
    position: absolute;
    bottom: -44px;
}
.screen-4__type__item_i_1{
    background: url('../img/phone-1.png') no-repeat left top;
}
.screen-4__type__item_i_2{
    background: url('../img/phone-2.png') no-repeat left top;
}
.screen-4__type__item_i_3{
    background: url('../img/phone-3.png') no-repeat left top;
}
.screen-4__type__item_i_4{
    background: url('../img/phone-4.png') no-repeat left top;
}
.screen-4__type__item__storage{
    width: 100%;
    height: 12px;
    line-height: 12px;
    font:12px;
    color: #a4a9ae;
    position: absolute;
    bottom: -66px;
}
/*第五屏*/
.screen-5{
    height: 800px;
    position: relative;
    overflow: hidden;
    background-color: #d9dde1;
}
.screen-5__bg{
    width: 1920px;
    height: 433px;
    background:url(../img/bg-screen-5.png) no-repeat center;
    background-size: contain;
    position: absolute;
    left: 50%;
    margin-left: -960px;
    bottom: -100px;
}
/*大标题*/
.screen-5__heading{
    font-size: 46px;
    line-height: 46px;
    color: #f01400;
    text-align: center;
    padding-top: 130px;
}
/*子标题*/
.screen-5__subheading{
    font-size: 14px;
    color: #2c3137;
    text-align: center;
    padding-top: 25px;
    line-height: 28px;
}
 
/*第六屏*/
.screen-buy{
    height: 80px;
    padding: 120px 0;
    position: relative;
    overflow: hidden;
    background: #2b333b url('../img/bg-screen-buy.png') center no-repeat;
    text-align: center;
}
/*按钮*/
.screen-buy__button{
    height: 80px;
    width: 240px;
    text-align: center;
    line-height: 80px;
    font-size: 24px;
    color: #fff;
    background-color: #f01414;
    display: inline-block;
    border-radius: 3px;
    /*按钮的渐变效果*/
    transition: all .5s;
}
.screen-buy__button:hover{
    box-shadow: 0px 0px 10px #fff;
}
/*底部*/
.footer{
    height: 80px;
    line-height: 80px;
    text-align: center;
    color: #fff;
    font-size: 12px;
    background-color: #07111b;
}
/*导航侧边栏*/
.outline{
    position: fixed;
    padding: 5px 10px;
    bottom: 120px;
    right: 0;
    z-index: 3;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,.5)
}
.outline__item{
    display: block;
    width: 40px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    padding: 5px 0;
    background-color: #fff;
    margin-top: 5px;
    border-top: 1px solid #eee;
    color: #93999f;
}
.outline__item:first-child{
    border: none;
}
.outline__item_status_active{
    color: red;
}
Redamancy_Y6 2020-02-28
源自：宣传页项目   5-3 JS实现交互动画(导航条)
34
收起

正在回答

登陆购买课程后可参与讨论，去登陆吧

2回答
好帮手慕星星 回答被采纳获得+3积分 2020-02-29 09:38:11

同学你好，这边测试没有问题，一开始导航栏默认在顶部：

http://img1.sycdn.imooc.com//climg/5e59c0450932858d10590207.jpg

页面滚动的时候添加了类名，设置了固定定位：

http://img1.sycdn.imooc.com//climg/5e59c06809c32a0312170534.jpg

建议重新测试下，效果没有问题哦。

祝学习愉快！

0
收起回答
好帮手慕星星 2020-02-28 19:31:44

同学你好，代码中也输出了滚动的值top为0，这是因为部分浏览器不兼容document.body.scrollTop 属性值，所以有问题。可以修改为：

http://img1.sycdn.imooc.com//climg/5e58fa0309c7c8f906990119.jpg

自己可以再测试下，祝学习愉快！

0
收起回答
  • 提问者 Redamancy_Y6 #1
    老师，你太厉害了！我找了一天的错，原来是浏览器不兼容。想问一下老师，最上面的导航栏没有一直粘在顶部是什么问题？
    2020-02-28 19:44:01
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

老师，为什么我滑动滚动条时，
2 0 4
老师，第一屏滚动没有效果是怎么回事？麻烦老师帮忙看一下是哪里打错了
39 0 11
拖动滚动条第一屏不显示是哪里的问题？
2 0 8
关于滚动条更新
13 1 3
为什么我的ScrollView不能滚动
2 0 4

登录后可查看更多问答，登录/注册

1.前端零基础入门
  • 参与学习           人
  • 提交作业       8403    份
  • 解答问题       40143    个

本阶段为你揭开日常所见网页的神秘面纱，炫酷的动效并不难得，带你从基础知识到静态网页布局，再到用JS实现动态网页开发，轻松迈入前端开发的大门。

了解课程

本课精华内容

问答 作业

关于浏览器兼容性代码疑问

16 1

请老师检查

65 3

没有明白，为什么height是90，padding-top为60。它就居中了？

26 3

关于三种常用的清除浮动方法的优劣对比，请老师简单讲一讲

18 1

进击的小白们加油。分享一下我做最后这个项目作业的感受

188 1

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师
插入代码