老师,关于header有问题

老师,关于header有问题

题目要求是header的初始状态是黑底白字,滚动一定距离之后变成白底黑字,现在我的问题是,1,初始状态不知道logo的字为什么不是白色,2,滚动一定距离之后header的背景色以及别的文字颜色没有变化,虽然header_status_white这个类名捕捉到了,但是样式却没有执行  3,我看老师的代码header的animate_done样式并没有显示出来,但是我的代码运行时候会有?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>H5实战</title>
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/hw6.css">
</head>
<body>
<div class="box">
<header class="header">
<div class="header_wrap">
<div class="header_logo">H5实战页面</div>
<nav class="header_nav">
<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">云端学习</a>
<a href="javascript:;" class="header_nav-item header_nav-item_button">即刻学习</a>
<div class="nav-underline"></div>
</nav>
</div>
</header>
<!-- 第一屏 -->
<div class="screen-1">
<h2 class="screen-1_heading">实战课程重磅上线</h2>
<h4 class="screen-1_subheading">一键云学习,还在等待什么?</h4>
</div>

<!-- 第二屏 -->
<div class="screen-2">
<h2 class="screen-2_heading">每门课都是真实商业案例</h2>
<hr class="screen-2_little-bar">
<h4 class="screen-2_subheading">真实案例,真实场景,在实战中实践、操作、调试<br/>大牛带你体验BAT真实开发流程,所有开发过程一一为你呈现</h4>
<div class="screen-2_bg">
<div class="screen-2_bg1"></div>
<div class="screen-2_bg2"></div>
<div class="screen-2_bg3"></div>
</div>
</div>

<!-- 第三屏 -->
<div class="screen-3">
<div class="screen-3_wrap">
<div class="screen-3_pic"></div>
<div class="screen-3_headings">
<h2 class="screen-3_heading">强大的语言课程体系支持</h2>
<hr class="screen-3_little-bar">
<h4 class="screen-3_subheading">学习环境与课程轻松对接,安装、调试、写入、部署、运行,一站式解决<br/>,让你体验开发全流程</h4>
</div>
<div class="screen-3_item">
<div class="screen-3_item1">
<div class="screen-3_item1_circle1"></div>
<div class="screen-3_item1_disc1">HTML5</div>

</div>
<div class="screen-3_item2">
<div class="screen-3_item2_circle2"></div>
<div class="screen-3_item2_disc2">PHP</div>
</div>
<div class="screen-3_item3">
<div class="screen-3_item3_circle3"></div>
<div class="screen-3_item3_disc3">JAVA</div>
</div>
<div class="screen-3_item4">
<div class="screen-3_item4_circle4"></div>
<div class="screen-3_item4_disc4">Python</div>
</div>
<div class="screen-3_item5">
<div class="screen-3_item5_circle5"></div>
<div class="screen-3_item5_disc5">Node.js</div>
</div>
</div>
</div>
</div>
<!-- 第四屏 -->
<div class="screen-4">
<div class="screen-4_wrap">
<h2 class="screen-4_heading">省去本地复杂的环境搭建</h2>
<hr class="screen-4_little-bar">
<h4 class="screen-4_subheading">你可以告别在虚拟机中调试开发了</h4>
<div class="screen-4_items">
<div class="screen-4_item-1">
<div class="screen-4_words">实战课程集成开发环境</div>
</div>
<div class="screen-4_item-2">
<div class="screen-4_words">内置终端命令行</div>
</div>
<div class="screen-4_item-3">
<div class="screen-4_words">编译你的应用程序</div>
</div>
<div class="screen-4_item-4">
<div class="screen-4_words">通过云端服务输出效果</div>
</div>
</div>
</div>
</div>

<!-- 第五屏 -->
<div class="screen-5">
<!-- 第五屏小图 -->
<div class="screen-5_bg1"></div>
<h2 class="screen-5_heading">云端学习可以这样简单</h2>
<hr class="screen-5_little-bar">
<h4 class="screen-5_subheading">看视频,敲代码,一气呵成。结合慕课网为你提供的云端学习工具,所见即所得。从此学习不一样。</h4>
</div>

<!-- 继续了解学习体验 -->
<div class="screen-6">
<a href="javascript:;" class="screen-6_button">继续了解学习体验</a>
</div>
<footer class="footer">
<div class="footer-nav">
<a href="javascript:;" class="footer-nav_item">网站首页</a>
<a href="javascript:;" class="footer-nav_item">人才招聘</a>
<a href="javascript:;" class="footer-nav_item">联系我们</a>
<a href="javascript:;" class="footer-nav_item">高校联盟</a>
<a href="javascript:;" class="footer-nav_item">关于我们</a>
<a href="javascript:;" class="footer-nav_item">将是招募</a>
<a href="javascript:;" class="footer-nav_item">意见反馈</a>
<a href="javascript:;" class="footer-nav_item">友情链接</a>
<br/>
<span>Copyright &copy 2015 imooc.com All Rights Reserved |&nbsp京ICP备13046642号-2</span>
</div>
</footer>
<div class="outline">
<a href="javascript:;" class="outline_item outline_item_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>
</div>
<script type="text/javascript" src="js/hw6.js"></script>
</body>
</html>
/*animate.css*/
.header, .screen-1_subheading{
	transition: all 1.5s;
}
.screen-1_heading
{
	transition: all 1s;
}
.header_animate_init{
	opacity: 0;
	transform: translate(0,-100%);
}
.header_animate_done{
	opacity: 1;
	transform:translate(0,0);
}
.screen-1_heading_animate_init,
.screen-1_subheading_animate_init{
	opacity: 0;
	transform: translate(0,100%); /*100%是指它本身高度的100%*/
}
.screen-1_heading_animate_done,
.screen-1_subheading_animate_done{
	opacity: 1;
	transform:translate(0,0);
}

/*the second screen*/
.screen-2_heading{transition: all 1s;}
.screen-2_subheading,
.screen-2_little-bar,
.screen-2_bg2
/*.screen-3_bg3*/
{
	transition: all 1.5s;
}

.screen-2_heading_animate_init,
.screen-2_subheading_animate_init
{
	opacity: 0;
	transform: translate(0,100%); /*100%是指它本身高度的100%*/
}
.screen-2_bg3_animate_init{
	opacity:0;
	transform: translate(0,-100%);
}
.screen-2_heading_animate_done,
.screen-2_subheading_animate_done
{
	opacity: 1;
	transform:translate(0,0);
}
.screen-2_bg3_animate_done{
	animation:bounceInUp 1s 1.5s;
}
@keyframes bounceInUp{
	0%,50%,100%{transition-timing-function:cubic-bezier(0.1, -0.6, 0.2, 0);

	}
	0%{
		opacity: 0;
		-webkit-transform: translate(0,300px);
	}
	30%{
		opacity: 1;
		-webkit-transform: translate(0,-20px);
	}
	50%{
		opacity: 1;
		-webkit-transform: translate(0,10px);
	}
	70%{
		opacity: 1;
		-webkit-transform: translate(0,-10px);
	}
	100%{
		opacity: 1;
		-webkit-transform: translate(0,0);
	}
}
.screen-2_little-bar_animate_init{opacity: 0; }
.screen-2_little-bar_animate_done{opacity: 1; }

.screen-2_bg2_animate_init{
	opacity: 0;
	transform: translate(0,100%);
}
.screen-2_bg2_animate_done{
	opacity: 1;
	transform:translate(0,0);
}

/*the third screen*/
.screen-3_pic,
.screen-3_heading
{
	transition: all 1s .5s;
}
.screen-3_subheading,
.screen-3_little-bar
{
	transition: all 1.5s .8s;
}
.screen-3_item{
	transition: all 1s 1.2s;
}
.screen-3_pic_animate_init{
	opacity: 1;
	-webkit-transform:scale(0.2,0.2) translate(-200px,-200px);/*有点问题??????*/
}
.screen-3_pic_animate_done{
	opacity: 1;
	transform:scale(1.5) translate(0,0);
}
.screen-3_heading_animate_init,
.screen-3_subheading_animate_init
{
	opacity: 0;
	transform: translate(0,100%); 
}
.screen-3_heading_animate_done,
.screen-3_subheading_animate_done
{
	opacity: 1;
	transform:translate(0,0);
}
.screen-3_little-bar_animate_init{opacity: 0; }
.screen-3_little-bar_animate_done{opacity: 1; }
.screen-3_item_animate_init{
	opacity:0;
}
.screen-3_item_animate_done{
	animation:bounceInUp 1s 1.5s;
}

/*the forth screen*/
.screen-4_heading,
.screen-4_items{
	transition: all 1s .5s;
}
.screen-4_subheading,
.screen-4_little-bar{
	transition:all 1s 1s;
}
.screen-4_heading_animate_init,
.screen-4_subheading_animate_init
{
	opacity: 0;
	transform: translate(0,100%); 
}
.screen-4_heading_animate_done,
.screen-4_subheading_animate_done
{
	opacity: 1;
	transform:translate(0,0);
}
.screen-4_little-bar_animate_init{opacity: 0; }
.screen-4_little-bar_animate_done{opacity: 1; }
.screen-4_items_animate_init{
	opacity:0;
	transform:scale(0.2);
}
.screen-4_items_animate_done{
	opacity:1;
	/*transform:scale(1);*/
}

/*the fifth screen*/

.screen-5_heading{
	transition: all 1s .5s;
}
.screen-5_little-bar,
.screen-5_subheading{
	transition: all 1s 1s;
}
.screen-5_heading_animate_init{
	opacity:0;
}
.screen-5_heading_animate_done{
	opacity:1;
}
.screen-5_subheading_animate_init{
	opacity:0;
	transform: translate(0,100%);
}
.screen-5_heading_animate_done{
	opacity:1;
	transform: translate(0,0);
}
.screen-5_little-bar_animate_init{opacity: 0; }
.screen-5_little-bar_animate_done{opacity: 1; }

/*导航条样式变化*/
.header{
	transition: all 1s; /*导航渐渐变成白色的,这里有问题??????*/
}
.header_status_white{
	background: rgba(255,0,0,.5);
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 3;
}
.header_status_white .header_logo{
	color:white;
}
.header_status_white .header_nav-item
{
	color: white;
}
/*hw6.css*/
.header{
	background: rgba(0,0,0, .1);
	position:fixed;
	top:0;
	width:100%;

}
.header_wrap{
	width:100%;
	height:60px;
	position:relative;
}
.header_logo{
	width:20%; /*这里设置太小文字会换行*/
	height:60px;
	line-height:60px;
	font-size: 20px;
	font-weight:bold;
	background: url(../img/logo.png) 10px  center no-repeat ;
	background-size:40px 40px;
	position:absolute;
	text-indent: 60px; /*这个是让logo后面的字右移的*/	
	/*color:white;*/
}
.header_nav{	
	right:40px;
	height:50px;
	top:50%;
	margin-top:-25px;
	position:absolute;/*只有写了上面还有这一句的position,导航才会到右边*/
}
.header_nav-item{
	color:white;
	font-size:16px;
	display:block;
	height:50px;
	line-height:50px;
	float:left;
	margin-left:40px;
	position: relative;
	
}
/*.header__nav-item_status_active{
	text-decoration: underline;
}*/
.header_nav-item_button{
	background:red;
	color:white;
	width:90px;
	border-radius:3px;
	text-align: center;
	padding:0;
}
/*第一屏*/
.screen-1{
	height:640px;
	background:url(../img/sc1.jpg) no-repeat center;
	background-size:cover; /*背景图平铺*/
	overflow: hidden;
}
.screen-1_heading{
	font-size:40px;
	font-weight:1000;
	color:white;
	text-align:center;
	padding-top:230px;
}
.screen-1_subheading{
	font-size:15px;
	font-weight:normal;
	color:white;
	text-align:center;
}
.screen-2{
	background-color: #f3f5f7;
	height:640px;
	overflow: hidden;
	/*position:relative;*/
}
.screen-2_heading{
	font-size:40px;
	font-weight:bold;
	color:black;
	text-align:center;
	padding-top:20px;
}
.screen-2_little-bar{
	width:40px;
	height:3px;
	border:none;
	border-top:3px solid red;
}
.screen-2_subheading{
	font-size:15px;
	height:20px;
	font-weight:normal;
	color:black;
	text-align:center;
}
.screen-2_bg{
	position:relative;
	left:50%;
	margin-left:-325px;
}
.screen-2_bg1{
	height:361px;
	width:750px;
	background:url(../img/sc2.png) center center no-repeat ;
	background-size:contain;
	position:absolute;
	padding-top:150px;
	overflow: hidden;
}
.screen-2_bg2{
	height:380px;
	width:275px;
	background:url(../img/sc2-1.png) center center no-repeat ;
	position:absolute;
	margin-left:240px;
	padding-top:110px;
	overflow: hidden;
	z-index: 2;
}
.screen-2_bg3{
	height:205px;
	width:266px;
	background:url(../img/sc2-2.png) center center no-repeat ;
	position:absolute;
	margin-left:350px;
	padding-top:260px;
	overflow: hidden;
	z-index: 1;
}
/*第三屏*/
.screen-3{
	height:640px;	
	background-color:#2b333b;/*注意颜色写在图片的下面才能实现颜色图片都显示*/
}
.screen-3_wrap{
	width:1200px;
	height:640px;
	margin:0 auto;	
	position: relative;
}
.screen-3_pic{
	position:absolute;
	/*left:200px;*/
	top:50%;
	margin-top:-170px;
	width:308px;
	height:340px;
	background: url(../img/sc3.png) left center no-repeat;
	background-size:cover;
	/*transform: scale(1.5);*/
}


.screen-3_heading{
	/*position:absolute;*/
	font-size:30px;
	font-weight:bold;
	color:white;
	margin-left:600px;

	padding-top:200px;
	display:block;

}
.screen-3_little-bar{
	width:40px;
	height:3px;
	border:none;
	border-top:3px solid red;
	margin-left:600px;
}
.screen-3_subheading{
	font-size:15px;
	height:20px;
	font-weight:normal;
	color:white;
	text-align:left;
	margin-left:600px;
}
.screen-3_item{
	height:20px;
	font-size:12px;
	padding-top:200px;
	margin-left:600px;

}
.screen-3_item1{
	float:left;
	color:#197bb8;
	padding-left:20px;/*可以控制整体往左的距离*/

}
.screen-3_item1_circle1,
.screen-3_item2_circle2,
.screen-3_item3_circle3,
.screen-3_item4_circle4,
.screen-3_item5_circle5{
	width:60px;
	height:60px;
	border:3px solid ;
	border-radius:50%;
	float:left;
	opacity:.5;
}
.screen-3_item1_disc1,
.screen-3_item2_disc2,
.screen-3_item3_disc3,
.screen-3_item4_disc4,
.screen-3_item5_disc5{
	height:60px;
	line-height:60px;
	font-weight:bolder;
	float:left;
	margin-left:-60px;
	margin-top: 3px;
}

.screen-3_item2{
	float:left;
	color:#4f5bac;
	padding-left:50px;
}

.screen-3_item2_disc2{
	margin-left:-46px;
}
.screen-3_item3{
	float:left;
	color:#99464d;
	padding-left:50px;
}
.screen-3_item3_disc3{
	margin-left:-49px;
}
.screen-3_item4{
	float:left;
	color:#277d8f;
	padding-left:50px;
}
.screen-3_item5{
	float:left;
	color:#628448;
	padding-left:50px;
}
/*第四屏*/
.screen-4{
	height:640px;
	background-color: #f3f5f7;
}
.screen-4_wrap{ 
	width:1200px;
	margin:0 auto;
	text-align:center;
	background-size:cover;
	position: relative;
	/*padding-top:30px;*/
}
.screen-4_heading{
	font-size:40px;
	font-weight:bold;
	color:black;
	text-align:center;
	padding-top:40px;
}
.screen-4_little-bar{
	width:40px;
	height:3px;
	border:none;
	border-top:3px solid red;
}
.screen-4_subheading{
	font-size:15px;
	height:20px;
	font-weight:normal;
	color:black;
	text-align:center;
}
.screen-4_items{
	width:1200px;
	height:300px;
	margin-left:220px;
	margin-top:60px;
}
.screen-4_item-1,
.screen-4_item-2,
.screen-4_item-3,
.screen-4_item-4{
	width:220px;
	height:80px;
	float:left;

}
.screen-4_words{
	width:100%;
	height:14px;
	line-height:14px;
	position: absolute;
	top:340px;
	margin-left:-550px;
}
.screen-4_item-1{
	background:url('../img/sc4-1.png') no-repeat left top;
}
.screen-4_item-2{
	background:url('../img/sc4-2.png') no-repeat left top;
}
.screen-4_item-3{
	background:url('../img/sc4-3.png') no-repeat left top;
}
.screen-4_item-4{
	background:url('../img/sc4-4.png') no-repeat left top;
}

.screen-5{
	height:640px;
	width:100%;
	background:url('../img/sc5.jpg') no-repeat center;
	background-size: cover;
}


.screen-5_bg1{/*小图*/
	width:200px;
	height:200px;
	background:url('../img/sc5-1.png') no-repeat center;
	background-size: contain;
	z-index: 2;
	position: absolute;
	left: 50%;
	margin-left:-100px;
	padding-top:200px;
	overflow: hidden;
}

.screen-5_heading{
	font-size:40px;
	font-weight:bold;
	color:white;
	text-align:center;
	padding-top:380px;
}
.screen-5_little-bar{
	width:40px;
	height:3px;
	border:none;
	border-top:3px solid white;
}
.screen-5_subheading{
	font-size:15px;
	height:20px;
	font-weight:normal;
	color:white;
	text-align:center;
}
.screen-6{
	height:160px;
	text-align:center;
	line-height:160px;

}
.screen-6_button{
	color:black;
	border:1px solid black;
	border-radius:3px;
	font-size: 20px;
	padding:10px 20px;	
}
.footer{
	height:120px;
	background-color: black;

}
.footer-nav,
.footer-nav_item
{
	height:60px;
	line-height: 30px;
	padding-top:25px;
	text-align:center;
	color:white;
}
.footer-nav_item{
	font-weight:bold;
	padding-right:20px;

}
.footer-nav span{
	font-size:15px;
	font-weight: normal;
	opacity:.7;
}
.outline{
	position: fixed;
	right:0;
	bottom:150px;
	z-index:3;
	background:white;
	padding:2px 10px;
	box-shadow: 0px 4px 12px rgba(7, 17, 27, 0.1);

}
.outline_item{
	color:black;
	display:block;/*这样就垂直方向排列了*/
	padding: 10px;
}
.outline_item_active{
	color:red;
}
// hw6.js
//获取元素
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' : [
		'.header',
		'.screen-1_heading',
		'.screen-1_subheading', //此处的逗号在IE下要去掉

	],

	'.screen-2' : [
		'.screen-2_heading',
		'.screen-2_little-bar',
		'.screen-2_subheading',
		'.screen-2_bg2',
		'.screen-2_bg3',
	],
	'.screen-3' : [
		'.screen-3_pic',
		'.screen-3_heading',
		'.screen-3_little-bar',
		'.screen-3_subheading',
		'.screen-3_item',
	],
	'.screen-4' : [
		'.screen-4_heading',
		'.screen-4_little-bar',
		'.screen-4_subheading',
		'.screen-4_items',
	],
	'.screen-5' : [
		'.screen-5_bg1',
		'.screen-5_heading',
		'.screen-5_little-bar',
		'.screen-5_subheading',
	],
}
//设置屏内元素为初始状态
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');
	}
}

//设置播放屏内元素,一开始已经把屏内元素设置成了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'));
    }
}
window.onload = function(){
	console.log('onload');
	for(k in screenAnimateElements){
  		setScreenAnimateInit(k);
	}
}

//第二步,滚动到哪播放哪
window.onscroll = function(){
	//这里有浏览器兼容问题要这么写,好像是html文件声明跟不声明的区别
	var top = document.documentElement.scrollTop || document.body.scrollTop;
	console.log(top);

	//不同的屏导航条样式变化
	if( top > 100 ){
      	addCls(getElem('.header'),'header_status_white');
	  }else{
	    delCls(getElem('.header'),'header_status_white');
	  }

	if(top>1){
		playScreenAnimateDone('.screen-1');
	}
	if(top>640*1 - 200){
		playScreenAnimateDone('.screen-2');
	}
	if(top>640*2 - 200){
		playScreenAnimateDone('.screen-3');
	}
	if(top>640*3 - 200){
		playScreenAnimateDone('.screen-4');
	}
	if(top>640*4 - 200){
		playScreenAnimateDone('.screen-5');
	}
}


正在回答

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

2回答

同学你好,增加选择器的权重就可以解决了。

代码参考:

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

同学可以测试下,如果还有其他问题,可以新建一个问题,老师帮助解决哦

如果帮助到了你,欢迎采纳~祝学习愉快~

好帮手慕言 2019-08-21 16:22:55

同学你好,

1、初始状态字体不是白色,是因为同学把设置字体颜色的样式注释了。

建议:不注释

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

2、滚动之后,文字颜色没有变化,是因为同学滚动之后的字体颜色设置的就是白色。

建议:设置为黑色

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

3、老师在视频中所讲的项目,添加的类名是.header_status_black哦

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

如果设置的样式没有生效,可以打开调试工具,查看样式是否生效。

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

如果帮助到了你,欢迎采纳~祝学习愉快~

  • 提问者 慕勒8522502 #1
    我也试了,在调试窗口里我看到的只有header的样式显示了,但是header_status_white的样式没有显示,如果在调试窗口把header的背景样式取消之后,header_status的样式才会显示出来,请问老师该怎么解决呢?
    2019-08-21 23:28:27
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师