老师，为什么突然不能实现了呢

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</nav>

</div>

</header>

<h2 class="screen-1__heading">实战课程重磅上线</h2>

<h3 class="screen-1__subheading">一键云学习，还在等待什么？</h3>

</div>

<h2 class="screen-2__heading">每门课都是真实商业案例</h2>

<h3 class="screen-2__subheading">真实案例，真实场景，在实战中实践、操作、调试<br/>

大牛带你体验BAT真实开发流程，所有开发过程————为你呈现</h3>

</div>

<div class="screen-3__heading">强大的语言课程体系支持</div>

<div class="screen-3__subheading">学习环境与课程轻松对接，安装、调试、写入、部署、运行，一站式解决<br/>让你体验开发全流程</div>

<div class="screen-3__circle-item screen-3__circle-item_4">Python</div>

</div>

<h2 class="screen-4__heading">省去本地复杂环境搭建</h2>

<h3 class="screen-4__subheading">你可以告别在虚拟机中调试开发了</h3>

<div class="screen-4__type__item__storage">实战课程集成开发环境</div>

</div>

<div class="screen-4__type__item__storage">内置终端命令行</div>

</div>

<div class="screen-4__type__item__storage">编译你的应用程序</div>

</div>

<div class="screen-4__type__item__storage">通过云端服务输出效果</div>

</div>

<h2 class="screen-5__heading">云端学习可以这样简单</h2>

<h3 class="screen-5__subheading">看视频，敲代码，一气呵成。结合慕课网为你提供的云端学习工具，所见即所得。从此学习不一样</h3>

</div>

<a href="#" class="screen-6__button">继续了解学习体验</a>

</div>

</div>

</footer>

</aside>

</div>

</body>

</html>

.header{

color:#fff;

}

.header__wrap{

width:100%;

height: 60px;

margin: 0 auto;

position: relative;

z-index: 4;

}

.header__logo{

width: 148px;

height: 40px;

background: url('../img/logo.png') left center no-repeat;

background-size: 40px 40px;

position: absolute;

top:50%;

margin-top: -20px;

left: 10px;

font-size: 17px;

line-height: 40px;

text-indent: 50px;

}

.header__logo:hover,

.header__nav-item_active{

color:red;

}

.header__nav{

position: absolute;

right: 30px;

height: 40px;

top: 50%;

margin-top: -20px;

}

.header__nav-item{

font-size: 14px;

height: 40px;

width: 56px;

line-height: 40px;

float: left;

text-align:center;

padding-left: 40px;

color: #fff;

position: relative;

display: block;

}

.header__nav-item_button{

background: red ;

border-radius: 3px;

width: 90px;

color: #fff;

text-align: center;

padding: 0;

margin-left: 40px;

}

.header__nav-tip{

position: absolute;

width: 56px;

margin-left: 40px;

height: 2px;

background: #f00;

left: 0;

bottom: 0px;

transition: .5s;

}

.screen-1{

height: 640px;

position: relative;

overflow: hidden;

background:url(../img/sc1.jpg) no-repeat center;

background-size: cover;

margin-top: -60px;

z-index: 2;

}

.screen-1__heading{

font-weight: bold;

font-size: 46px;

color: #fff;

text-align: center;

padding-top: 220px;

}

.screen-1__subheading{

color: #fff;

font-size: 16px;

padding-top: 30px;

text-align: center;

}

.screen-2{

height: 640px;

background-color: #f3f5f7;

position: relative;

overflow: hidden;

}

.screen-2__heading{

color:#07111b;

text-align: center;

padding-top: 85px;

font-size:40px;

font-weight: bold;

}

.screen-2__line{

width: 55px;

height: 3px;

background-color: red;

margin: 30px auto;

}

.screen-2__subheading{

color: #07111b;

text-align: center;

padding-top:10px;

font-size: 14px;

}

.screen-2__bat{

background: url(../img/sc2.png) no-repeat center;

width: 750px;

height: 361px;

position: absolute;

left: 50%;

bottom: 0;

margin-left: -375px;

}

.screen-2__rocket{

background: url(../img/sc2-2.png);

width: 266px;

height: 205px;

position: absolute;

left: 50%;

bottom:100px;

margin-left: -40px;

}

.screen-2__man{

background: url(../img/sc2-1.png);

width: 275px;

height: 380px;

position: absolute;

left: 50%;

bottom: 0;

margin-left: -137px;

z-index: 2px;

}

.screen-3{

height: 640px;

background-color: #2b333b;;

position: relative;

overflow: hidden;

}

.screen-3__wrap{

width: 1200px;

height: auto;

margin: 0 auto;

}

.screen-3__flower{

position:absolute;

background: url(../img/sc3.png);

width: 308px;

height: 340px;

top: 50%;

margin-top:-170px;

}

.screen-3__wrap1{

width: 700px;

position: absolute;

right: 0;

top: 0;

}

.screen-3__heading{

color: #fff;

text-align: left;

font-size: 35px;

font-weight: bold;

line-height: 35px;

padding-top: 180px;

}

.screen-3__line{

width: 46px;

height: 3px;

background-color: red;

margin-top: 30px;

right: 340px;

}

.screen-3__subheading{

color: #fff;

text-align: left;

padding-top:25px;

font-size: 14px;

margin-bottom: 200px;

float: left;

}

.screen-3__circle{

width: 520px;

height: 68px;

padding-bottom: 50px;

padding-left: 14px;

}

.screen-3__circle-item{

width: 55px;

height: 55px;

border-radius: 50%;

text-align: center;

margin-right: 35px;

border:5px solid;

float: left;

font-size: 12px;

font-weight: bold;

line-height: 55px;

}

.screen-3__circle-item_1{

border-color: #1f5975;

color: #1f5975;

}

.screen-3__circle-item_2{

border-color: #424d76;

color: #424d76;

}

.screen-3__circle-item_3{

border-color: #6b4146;

color: #6b4146;

}

.screen-3__circle-item_4{

border-color: #29535f;

color: #29535f;

}

.screen-3__circle-item_5{

border-color: #3e4e40;

color: #3e4e40;

}

.screen-4{

height: 640px;

position: relative;

overflow: hidden;

background: #f3f5f7;

}

.screen-4__wrap{

width: 1200px;

height: auto;

margin: 0 auto;

position: relative;

}

.screen-4__heading{

color: #07111b;

text-align: center;

font-size: 41px;

font-weight: bold;

margin-top: 90px;

margin-bottom: 35px;

}

.screen-4__line{

width: 55px;

height: 3px;

background-color: red;

margin: 20px auto;

}

.screen-4__subheading{

font-size:14px;

color: #07111b;

text-align: center;

/* padding-top: 29px; */

line-height: 28px;

}

.screen-4__type{

width: 1200px;

height: 270px;

position: absolute;

top: 304px;

left: 50%;

margin-left: -600px;

}

.screen-4__type__item{

width: 180px;

padding:60px;

height: 270px;

float: left;

position: relative;

font-size: 16px;

}

.screen-4__type__item_1{

background: url('../img/sc4-1.png') no-repeat center top;

background-size: 75px 78px;

}

.screen-4__type__item_2{

background: url('../img/sc4-2.png') no-repeat center top;

background-size: 75px 78px;

}

.screen-4__type__item_3{

background: url('../img/sc4-3.png') no-repeat center top;

background-size: 75px 78px;

}

.screen-4__type__item_4{

background: url('../img/sc4-4.png') no-repeat center top;

background-size: 75px 78px;

}

.screen-4__type__item__storage{

width: 100%;

height: 16px;

line-height: 16px;

font-size: 16px;

color: #07111b;

position: absolute;

text-align: center;

top:100px;

left: 0px;

}

.screen-5{

height: 640px;

position: relative;

background: url(../img/sc5.jpg) no-repeat center;

background-size: cover;

position: relative;

overflow: hidden;

}

.screen-5__img{

width: 200px;

height: 200px;

background: url(../img/sc5-1.png) no-repeat center;

position: absolute;

left: 50%;

margin-left: -100px;

top: 100px;

}

.screen-5__heading{

color: #fff;

text-align: center;

padding-top:350px;

font-size: 46px;

}

.screen-5__line{

width: 46px;

height: 2px;

background-color: #fff;

margin: 20px auto;

}

.screen-5__subheading{

color: #fff;

text-align: center;

font-size: 14px;

}

/*第六屏*/

.screen-6{

width: 100%;

height: 200px;

position: relative;

overflow: hidden;

}

.screen-6__button{

display: block;

width: 238px;

height: 58px;

border:1px solid #707070;

color: #14191e;

text-align: center;

line-height: 58px;

position: absolute;

top: 50%;

left: 50%;

margin-top: -29px;

margin-left: -119px;

}

/*页脚*/

.footer{

color: #a2cdd2;

text-align: center;

background-color: #000;

width:100%;

height: 100px;

}

.footer__webline{

padding-top: 30px;

padding-bottom: 20px;

}

.footer__webline_i{

margin:0 25px;

color: #a2cdd2;

}

.footer__icp{

color: #787d82;

}

.aside{

padding: 5px 10px;

background-color: #fff;

position: fixed;

right: 0;

bottom: 150px;

border-radius: 5px;

z-index: 9;

}

.aside__item{

display: block;

width: 30px;

height: 30px;

padding: 5px 0;

text-align: center;

line-height: 20px;

color: #000;

font-size: 16px;

}

.aside__item:hover,

.aside__item_status_active{

color: red;

}

.screen-1__heading{

transition: all .5s;

}

.screen-1__subheading{

transition: all 1s;

}

.screen-1__subheading_animate_init,

.screen-1__heading_animate_init{

opacity: 0;

transform: translate(0,100%);

}

.screen-1__subheading_animate_done,

.screen-1__heading_animate_done{

opacity: 1;

transform: translate(0,0);

}

/*第二屏动画*/

.screen-2__heading{

transition: all 1s .5s;

}

.screen-2__line,

.screen-2__subheading,

.screen-2__man{

transition: all 1s 1s;

}

.screen-2__rocket{

transition: all 1s 1.5s;

}

.screen-2__subheading_animate_init,

.screen-2__heading_animate_init,

.screen-2__line_animate_init{

transform: translate(0,100%);

opacity: 0;

}

.screen-2__subheading_animate_done,

.screen-2__heading_animate_done,

.screen-2__line_animate_done{

transform: translate(0,0);

}

.screen-2__man_animate_init{

opacity: 0;

}

.screen-2__man_animate_done{

opacity: 1;

}

/*火箭*/

@keyframes bounce{

0%{

opacity: 0;

transform: translate(0,100%);

}

50%{

opacity: 1;

transform: translate(0,-20px);

}

70%{

transform: translate(0,10px);

}

90%{

transform: translate(0,-5px);

}

100%{

transform: translate(0,0);

}

.screen-2__rocket_animate_init{

transform: translate(0,100%);

}

.screen-2__rocket_animate_done{

opacity: 1;

animation: bounce 1s 1.5s;

}

/*第三屏动画*/

.screen-3__flower{

transition: all 1s 0.5s;

}

.screen-3__heading{

transition: all 1s 1s;

}

.screen-3__line,

.screen-3__subheading{

transition: all 1s 1.5s;

}

.screen-3__circle{

transition: all 1s 2.5s;

}

.screen-3__flower_animate_init{

transform: scale(0);

}

.screen-3__flower_animate_done{

transform: scale(1);

}

.screen-3__heading_animate_init,

.screen-3__line_animate_init,

.screen-3__subheading_animate_init,

.screen-3__circle_animate_init{

transform: translate(0,100%);

opacity: 0;

}

.screen-3__heading_animate_done,

.screen-3__line_animate_done,

.screen-3__subheading_animate_done,

.screen-3__circle_animate_done{

transform: translate(0,0);

opacity: 1;

}

/*第四屏*/

.screen-4__heading,

.screen-4__type{

transition: all 1s .5s;

}

.screen-4__line,

.screen-4__subheading{

transition: all 1s 1s;

}

.screen-4__line_animate_init,

.screen-4__subheading_animate_init,

.screen-4__heading_animate_init{

transform: translate(0,100%);

opacity: 0;

}

.screen-4__type_animate_init{

transform: scale(.5);

opacity: 1;

}

.screen-4__line_animate_done,

.screen-4__subheading_animate_done,

.screen-4__heading_animate_done{

transform: translate(0,0);

opacity: 1;

}

.screen-4__type_animate_done{

transform: scale(1);

opacity: 1;

}

/*第五屏*/

.screen-5__img,

.screen-5__heading{

transition: all 1s .5s;

}

.screen-5__line,

.screen-5__subheading{

transition: all 1s 1s;

}

.screen-5__img_animate_init{

transform: scale(0);

opacity: 1;

}

.screen-5__img_animate_done{

transform: scale(1);

opacity: 1;

}

.screen-5__heading_animate_init,

.screen-5__line_animate_init,

.screen-5__subheading_animate_init{

transform: translate(0,100%);

opacity: 0;

}

.screen-5__line_animate_done,

.screen-5__subheading_animate_done,

.screen-5__heading_animate_done{

transform: translate(0,0);

opacity: 1;

}

/*导航条样式变动*/

.header{

transition: all 1s;

}

.header_status_black{

background: rgba(255,255,255,.5);

position: fixed;

top: 0px;

left: 0px;

right: 0px;

z-index: 4;

}

.header_status_black .header__nav-item,

.header_status_black .header__logo{

color: #000000;

}

.aside{

transform: translate(100%,0);

transition: all 1s;

}

.aside_status_in{

transform: translate(0,0);

}

/* .aside__item{

transition: all 1s;

} */

//获取元素

var getElem = function( selector ){

return document.querySelector(selector);

}

var getAllElem = function( selector ){

return document.querySelectorAll(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,' '))

}

//第一步：初始化样式 init

var screenAnimateElements= {

'.screen-1':[

'.screen-1__heading',

'.screen-1__subheading',

'.screen-2':[

'.screen-2__heading',

'.screen-2__subheading',

'.screen-2__line',

'.screen-2__bat',

'.screen-2__man',

'.screen-2__rocket',

'.screen-3':[

'.screen-3__heading',

'.screen-3__subheading',

'.screen-3__flower',

'.screen-3__circle',

'.screen-3__line',

'.screen-4':[

'.screen-4__heading',

'.screen-4__line',

'.screen-4__subheading',

'.screen-4__type',

'.screen-5':[

'.screen-5__heading',

'.screen-5__line',

'.screen-5__subheading',

'.screen-5__img',

]

};

//设置屏内元素为初始状态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');

}

// 第一步：初始化设置

window.onload=function(){

for(k in screenAnimateElements){

if (k=='.screen-1') {

continue;

}

setScreenAnimateInit(k);

}

// 设置播放屏内元素动画 init-->done

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'));

}

//附加：初始化第一屏的动画（1. skipScreenAnimateInit 2.跳过 init ）

setTimeout(function(){playScreenAnimateDone('.screen-1');},100)

// 第二步：滚动到那播放到哪

var navItems = getAllElem('.header__nav-item');

var asideItems = getAllElem('.aside__item');

var switchNavItemsActive = function( idx){

for(var i=0;i<navItems.length;i++){

console.log(navItems[i]);

delCls(navItems[i],'header__nav-item_active');

// navTip.style.left = 0+'px';

}

addCls(navItems[idx],'header__nav-item_active');

// navTip.style.left = ( idx * 70 )+'px';

for(var i=0;i<asideItems.length;i++){

delCls(asideItems[i],'aside__item_status_active');

}

addCls(asideItems[idx],'aside__item_status_active');

}

//给滚动条设置

window.onscroll = function(){

var top = document.body.scrollTop;

if(top>1){

playScreenAnimateDone('.screen-1');

}

if( top > 80 ){

addCls( getElem('.header'),'header_status_black' );

addCls( getElem('.aside'),'aside_status_in' );

}else{

delCls( getElem('.header'),'header_status_black' );

delCls( getElem('.aside'),'aside_status_in' );

switchNavItemsActive(0); // 后面添加的，不需要立刻

}

if(top>640*1-140){

playScreenAnimateDone('.screen-2');

switchNavItemsActive(1);

}

if(top>640*2-140){

playScreenAnimateDone('.screen-3');

switchNavItemsActive(2);

}

if(top>640*3-140){

playScreenAnimateDone('.screen-4');

switchNavItemsActive(3);

}

if(top>640*4-140){

playScreenAnimateDone('.screen-5');

switchNavItemsActive(4);

}

// 第三步导航条双向定位

// 3.1 导航条 - 点击页面跳转

var setNavJump = function(i,lib){

var elem = lib[i];

elem.onclick = function(){

document.body.scrollTop = i*640 + 1;

}

for(var i=0;i<navItems.length;i++){

setNavJump(i,navItems);

}

// 3.2 大纲-点击跳转

for(var i=0;i<asideItems.length;i++){

setNavJump(i,asideItems);

}

// 3.3 双向绑定，回到 onscrollTop（移动 navIntes、outLineItems到顶固）、增加 clear 样式函数

// 滑动门

var navTip = getElem('.header__nav-tip');

var setTip = function(idx,lib){

lib[idx].onmouseover =function(){

console.log(this,idx);

navTip.style.left = ( idx * 96 )+'px';

}

var currentIdx = 0;

lib[idx].onmouseout = function(){

console.log(currentIdx);

for(var i=0;i<lib.length;i++){

if( getCls( lib[i] ).indexOf('header__nav-item_active') > -1 ){

currentIdx = i;

break;

}

navTip.style.left = ( currentIdx * 96 )+'px';

}

for(var i=0;i<navItems.length;i++){

setTip(i,navItems);

}

慕九州8176055 2019-11-29

源自：宣传页项目 5-6 作业题

收起

3回答

好帮手慕糖 2019-11-30 14:18:06

同学你好，点击事件这里的document.body.scrollTop也需要修改下，例：

如果还是有问题的话，建议：可以查看下是否有报错，且可以将修改过后的代码粘贴过来，便于准确的定位与解决问题。

祝学习愉快~

收起回答

好帮手慕糖 2019-11-30 11:23:26

同学你好，1、顶部右侧的单击没有效果是因为a的链接是“#”，点击的时候，导致页面刷新，建议：可以设置为javascript:;例：

2、滚动的时候，顶部导航项的下划线也需要滑动，滚动的时候（onscroll）会调用switchNavItemsActive这个函数，建议：可以将下划线的移动添加到switchNavItemsActive这个函数中，例：

如果我的回答帮助了你，欢迎采纳，祝学习愉快~

收起回答

提问者慕九州8176055 #1

老师，更改过后点击还是没有效果呢

2019-11-30 12:25:53

好帮手慕糖 2019-11-30 10:23:53

同学你好，关于你的问题，回答如下：

这里是因为高度top的获取为0。是因为scrolltop有兼容性的，可以参考如下：

（1）IE：

对于没有doctype声明的页面，使用 document.body.scrollTop 或document.documentElement.scrollTop；

对于有doctype声明的页面，则使用 document.documentElement.scrollTop；

（2）Chrome、Firefox：

对于没有doctype声明的页面，使用 document.body.scrollTop 来获取 scrollTop高度；

对于有doctype声明的页面，则使用 document.documentElement.scrollTop；

所以一般使用scrollTop的话，用兼容性写法：document.body.scrollTop||document.documentElement.scrollTop

可以参考如下：

如果我的回答帮助了你，欢迎采纳，祝学习愉快~

收起回答

提问者慕九州8176055 #1

那为什么导航条和大纲双向定位和滑动门实现不了呢

2019-11-30 10:42:38

相似问题

wampserver一直都好用，项目做了一半了，突然不好使了

老师，这样为什么不能实现响应式啊？

老师，您看看有什么问题，为什么实现不了呢

登录突然出现问题！！！

老师现在学了的这些东西能写到简历里吗？

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

1.前端零基础入门

参与学习人
提交作业 8403 份
解答问题 40143 个

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

了解课程

本课精华内容

问答作业

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

16 1

请老师检查

65 3

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

26 3

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

18 1

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

188 1

查看更多本课问答

请稍等 ...

老师，为什么突然不能实现了呢

老师，为什么突然不能实现了呢

正在回答回答被采纳积分+1

请选择置顶位置