老师，滚动滚动条时，每个屏幕都没有动画效果，然后导航栏也没有一直在顶部是怎么回事
代码顺序为：index.html、index.js、test.js、animate.css、index.css，麻烦老师帮忙看看哪里出了问题
<!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>
//获取元素
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');
}
}// 将有动画效果的放一起
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);
}/*第一屏文字内容*/
/*第一屏文字*/
.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;
}/*
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;
}34
收起
正在回答
2回答
同学你好，这边测试没有问题，一开始导航栏默认在顶部：
页面滚动的时候添加了类名，设置了固定定位：
建议重新测试下，效果没有问题哦。
祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星