老师,为什么我滑动滚动条时,

老师,为什么我滑动滚动条时,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/css.css">
    <link rel="stylesheet" href="css/animate.css">
</head>
<body>
    <header class="header">
        <div class="header__logo">H5实战页面</div>
        <div 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" id="btn">即课学习</a>
            <div class="header__nav-tip"></div>
        </div>
    </header>
    <!--第一屏-->
    <div class="screen-1">
        <div class="wrap">
            <h2 class="screen-1__heading screen-1__heading_animate_init">实战课程重磅上线</h2>
            <h3 class="screen-1__subheading screen-1__subheading_animate_init">一键云学习,还在等待什么?</h3>
        </div>
    </div>
    <!--第二屏-->
    <div class="screen-2">
        <div class="wrap">
            <h2 class="screen-2__heading">每门课都是真是商业案例</h2>
            <h3 class="screen-2__subheading">真实案例,真实场景,在实践中实践、操作、调试<br>大牛带你体验BAT真实开发流程,所有开发流程一一为你呈现</h3>
            <div class="screen-2-pic"></div>
            <div class="screen-2-pic-1"></div>
        </div>
    </div>

    <!--第三屏-->
    <div class="screen-3">
        <div class="wrap">
            <div class="screen-3-pic"></div>
            <h2 class="screen-3__heading">强大的语言课程体系支持</h2>
            <h3 class="screen-3__subheading ">学习环境与课程轻松对接,安装、调试、写入、部署、运行,一站式解决<br>,让你体验开发全流程</h3>
            <div class="screen-3-items">
                <div class="screen-3-item screen-3-item-html5">HTML5</div>
                <div class="screen-3-item screen-3-item-PHP">PHP</div>
                <div class="screen-3-item screen-3-item-JAVA">JAVA</div>
                <div class="screen-3-item screen-3-item-Python">Python</div>
                <div class="screen-3-item screen-3-item-Node-js">Node.js</div>
            </div>
        </div>
    </div>
    <!--第四屏-->
    <div class="screen-4">
        <div class="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__word">实战课程集成开发环境</div>
                </div>
                <div class="screen-4__type__item screen-4__type__item_i_2">
                    <div class="screen-4__word">内置终端命令</div>
                </div>
                <div class="screen-4__type__item screen-4__type__item_i_3">
                    <div class="screen-4__word">编译你的应用程序</div>
                </div>
                <div class="screen-4__type__item screen-4__type__item_i_4">
                    <div class="screen-4__word">通过云端服务输出效果</div>
                </div>
            </div> 
        </div>
    </div>
    <!--第5屏-->
    <div class="screen-5">
        <div class="wrap">
            <h2 class="screen-5__heading">云端学习可以这样简单</h2>
            <h3 class="screen-5__subheading">看视频、敲代码,一气呵成,结合慕课网为你提供的云端学习工具,所见即所得,从此学习不一样</h3>
            <div class="screen-5-pic"></div>
        </div>
    </div>
    <!--第6屏-->
    <div class="screen-6">
        <div class="wrap">
            <div class="screen-6__button" id="screen-6__button">继续了解学习体验</div>
        </div>
    </div>
    <footer class="footer">
        <div class="daohang"> 网站首页  &nbsp;&nbsp;人才招聘&nbsp;&nbsp;    联系我们&nbsp;&nbsp;    高校联盟&nbsp;&nbsp;    关于我们&nbsp;&nbsp;    讲师招募&nbsp;&nbsp;    意见反馈&nbsp;&nbsp;    友情链接</div>
        <div class="banquan"> Copyrught © 2015 imooc.com All Rights REserved | 京ICP备 13046642号-2</div>
    </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 src="js/index.js"></script>
</body>
</html>
*{
    padding:0;
    margin:0;
}
a{
    text-decoration: none;
}
.wrap{
    width:1200px;
    margin:0 auto;
    height: auto;
}
/*头部区域*/
.header{
    width: 100%;
    height: 60px;
    position: relative;
    float: left;
    animation: headerAnimate 1s ease-in-out .5s;
}
.header__logo{
    width: 150px;
    height: 40px;
    line-height: 40px;
    background: url(../img/logo.png) no-repeat left center;
    background-size: 40px 40px ;
    text-indent: 50px;
    color:#fff;
    position: absolute;
    top:50%;
    margin-top:-20px;
    left:9px;
}
/*鼠标经过logo区的变化*/
.header__logo:hover{
    cursor: pointer;
}
.header__nav{
    position: absolute;
    right: 30px;
    height: 40px;
    position: absolute;
    top:50%;
    margin-top:-20px;
}
.header__nav-item{
    display: block;
    color: #fff;
    float: left;
    font-size: 14px;
    height: 40px;
    width:60px;
    text-align: center;
    line-height: 40px;
    padding-left: 40px;
    position: relative;
    text-align: center;
}
.header__nav-item:hover{
    color: red;
}


.header__nav-item_status_active{
    color:red;
}
.header__nav-item_status_active::after{
   /*  content: " ";
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: red;
    left:0;
    bottom: 0; */
} 
.header__nav-item_custom_button{
    width: 96px;
    height: 40px;
    background: #f01400;
    color:#fff;
    border-radius: 5px;
    padding:0;
    margin-left: 40px;
}

/*滑动条*/
.header__nav-tip{
    position: absolute;
    width: 60px;
    height: 2px;
    background-color: rgb(240, 0, 0);
    bottom: 0;
    left: 0;
    margin-left: 40px;
    transition: all .5s;
}

/*第一屏*/
.screen-1{
    background: url(../img/sc1.jpg) no-repeat center;
    height: 640px;
    background-size: cover;
    padding-top:60px;
}
.screen-1__heading{
    color:#fff;
    padding-top:240px;
    text-align: center;
    font-size: 40px; 
}
.screen-1__subheading{
    color: #fff;
    font-weight: normal;
    text-align: center;
    font-size: 14px;
    padding-top:27px;
}


/*第二屏*/
.screen-2{
    height: 640px;
    background:url(../img/sc2.png) no-repeat bottom;
    position: relative;
}
.screen-2__heading{
    font-size: 40px;
    padding-top:90px;
    text-align: center;
}
.screen-2__heading::after{
    content: " ";
    display: block;
    width:50px;
    height: 2px;
    background: #f01400;
    position: absolute;
    top:167px;
    left: 50%;
    margin-left: -25px;
}
.screen-2__subheading{
    font-size: 14px;
    height: 14px; 
    text-align: center;
    padding-top: 64px;
}
.screen-2-pic{
    background: url(../img/sc2-1.png) no-repeat;
    width: 275px;
    height: 380px;
    position: absolute;
    left:50%;
    margin-left: -137.5px;
    top:260px;
    z-index: 2;
}
.screen-2-pic-1{
    width: 266px;
    height: 205px;
    background: url(../img/sc2-2.png) no-repeat;
    position: absolute;
    top:335px;
    left:50%;
    margin-left: -40px;
    z-index: 1;
    animation: plane 1s ease 3s ;
}
/*第三屏*/
.screen-3{
    height: 640px;
    background: #2b333b;
    position: relative;
}
.screen-3-pic{
    background: url(../img/sc3.png) no-repeat center center;
    background-size: 408px 440px;
    width:408px;
    height: 440px;
    position: absolute;
    top:50%;
    margin-top: -220px;
    margin-left: 20px;
}
.screen-3__heading{
    color: #fff;
    font-size: 35px;
    text-align: right;
    padding-top:230px; 
    padding-right: 125px;
}
.screen-3__heading::after{
    content: " ";
    display: block;
    width:50px;
    height: 2px;
    background: #f01400;
    position: absolute;
    top:300px;
    left: 50%;
    margin-left: 90px;
}
.screen-3__subheading{
    font-weight: normal;
    font-size: 16px;
    color:#fff;
    height: 16px;     
    line-height: 24px;
    padding-top:60px;
    padding-left: 685px;
}   
.screen-3-items{
    width:583px;
    height: 67px;
    margin-top:170px;
    margin-left:600px;
} 
.screen-3-item{
    float: left;
    width: 67px;
    height: 67px;
    line-height: 67px;
    text-align: center;
    font-size: 12px;
    margin-left: 38px;
    border-radius: 50%;
}
.screen-3-item-html5{
    border: 4px solid #1f5975;
    color: #02a4ce;
}
.screen-3-item-PHP{
    border: 4px solid #424d76;
    color: #7872b4;
}
.screen-3-item-JAVA{
    border: 4px solid #6b4146;
    color: #ff6060;
}
.screen-3-item-Python{
    border: 4px solid #29535f;
    color: #22abc1;
}
.screen-3-item-Node-js{
    border: 4px solid #3e4e40;
    color: #66b056;
}
/*第4屏*/
.screen-4{
    height: 640px;
    background-color: #f3f5f7;
    position: relative;
}
.screen-4__heading{
    color:#07111b;
    font-size: 40px;
    line-height: 40px;
    text-align: center;
    padding-top:90px;
}
.screen-4__subheading{
    color: #07111b;
    font-size: 14px;
    text-align: center;
    padding-top:64px;
}
.screen-4__heading::after{
    content: " ";
    display: block;
    width:50px;
    height: 2px;
    background: #f01400;
    position: absolute;
    top:167px;
    left: 50%;
    margin-left: -25px;
}

.screen-4__type{
    width: 1200px;
    height: 120px;
    position: absolute;
    top:290px;
    margin-left: 20px;
}
.screen-4__type__item{
    width: 160px;
    margin-right: 170px;
    height: 80px;
    float: left;
    position: relative;
    text-align: center;
    background-size: cover;
}
.screen-4__type__item_i_1{
    background: url(../img/sc4-1.png) no-repeat center top;
}
.screen-4__type__item_i_2{
    background: url(../img/sc4-2.png) no-repeat center top;
}
.screen-4__type__item_i_3{
    background: url(../img/sc4-3.png) no-repeat center top;
}
.screen-4__type__item_i_4{
    background: url(../img/sc4-4.png) no-repeat center top;
    margin-right: 0;
}
.screen-4__word{
    width: 100%;
    height: 14px;
    color:#2c3238;
    font-size: 14px;
    line-height: 14px;
    position: absolute;
    bottom: -30px;
    text-align: center;
}


/*第5屏*/
.screen-5{
    height: 640px;
    background: url(../img/sc5.jpg) no-repeat;
    background-size: cover;
    position: relative;
}
.screen-5-pic{
    width:200px;
    height: 200px;
    background: url(../img/sc5-1.png) no-repeat center center;
    position: absolute;
    top:102px;
    left:50%;
    margin-left: -100px;
}
.screen-5__heading{
    font-size: 35px;
    color: #fff;
    text-align: center;
    padding-top:365px;
}
.screen-5__heading::after{
    content: " ";
    display: block;
    width:50px;
    height: 2px;
    background: #fff;
    position: absolute;
    top:435px;
    left: 50%;
    margin-left: -25px;
}
.screen-5__subheading{
    color:#fff;
    padding-top:65px;
    font-size: 14px;
    font-weight: normal;
    text-align: center;
}
/*第6屏*/
.screen-6{
    height: 200px;
    background: #fff;
    position: relative;
}
.screen-6__button{
    width:240px;
    height: 60px;
    line-height: 60px;
    color:#14191e;
    text-align: center;
    border:2px solid #707070;
    border-radius: 2px;
    position: absolute;
    top:50%;
    margin-top:-30px;
    left:50%;
    margin-left:-120px;
    cursor: pointer;
    border-radius: 3px;
}
.screen-6__button:hover{
    color:red;
}
/*脚步*/
.footer{
    height:106px;
    background: #000;
    color:#c8cdd2;
    text-align: center;
    
}
.daohang{
    padding-top: 34px;
    font-size: 14px;
}
.banquan{
    font-size: 16px;
    color: #787d82;
    padding-top:15px;
}

/*固定导航栏样式*/
.header{
    transition: all 1s;
}
.header_status_back{
    position: fixed;
    background: rgba(255,255,255,.5);
    top:0;
    left: 0;
    z-index: 3;
}
.header_status_back .header__nav-item,
.header_status_back .header__logo
{
    color:#000;
}
.header_status_back .header__nav-item_custom_button{
    color: #fff;
}
.header_status_back .header__nav-item_status_active
{
    color:red;
}

.header_status_back .header__nav-item:hover{
    color: red;
}

@keyframes headerAnimate{
    0%{
        transform: translateY(-400px);
        opacity: 0;
    }
    100%{
        transform: translateY(0px);
        opacity: 1;
    }
}

@keyframes  plane{
    0%{
        transform: translateY(600px);
        opacity: 0;
    }
    25%{
        transform: translateY(-15px);
    }
    50%{
        transform: translateY(10px);
        opacity: 1;
    }
    75%{
        transform: translateY(-5px);
    }
    100%{
        transform: translateY(0px);
        
    }
}

/*大纲视图*/
.outline{
    position: fixed;
    bottom: 120px;
    right: 0;
    background: #fff;
    z-index: 3;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .3);
    padding: 5px 15px;
}
.outline__item{
    display: block;
    width: 50px;
    height: 40px;
    color: #aaa;
    font-size: 12px;
    text-align: center;
    line-height: 40px;
    border-bottom: 1px solid #eee;
}
.outline__item:last-child{
    border-bottom: none;
}
.outline__item_status_active{
    color: red;
}
.outline{
    transition: all 1s;
    opacity: 0;
    transform: translate(100%,0);
}
.outline_status_in{
    opacity: 1;
    transform: translate(0,0);
}

.outline_status_in .outline__item:hover{
    color: red;
}
/*第一屏动画*/
.screen-1__heading{
    transition: all 1s;
}
.screen-1__heading_animate_init{
    transform: translate(0,30%);
    opacity: 0;
}
.screen-1__heading_animate_done{
    transform: translate(0,0);
    opacity: 1;
}
.screen-1__subheading{
    transition: all 1s .3s;
}
.screen-1__subheading_animate_init{
    transform: translate(0,100%);
    opacity: 0;
}
.screen-1__subheading_animate_done{
    transform: translate(0,0);
    opacity: 1;
}

/*第二屏动画*/
.screen-2__heading{
    transition: all 1s;
}
.screen-2__heading_animate_init{
    transform: translate(0,30%);
    opacity: 0;
}
.screen-2__heading_animate_done{
    transform: translate(0,0);
    opacity: 1;
}

.screen-2-pic{
    transition: all 1.5s .2s;
}
.screen-2__subheading{
    transition: all 1s .2s;
}
.screen-2__subheading_animate_init{
    transform: translate(0,100%);
    opacity: 0;
}
.screen-2__subheading_animate_done{
    transform: translate(0,0);
    opacity: 1;
}
.screen-2-pic_animate_init{
    opacity: 0;
}
.screen-2-pic_animate_done{
    opacity: 1;
}

/*第3屏动画*/
.screen-3-pic{
    transition: all 1s;
}
.screen-3-pic_animate_init{
    transform: scale(0);
    opacity: 0;
}
.screen-3-pic_animate_done{
    transform: scale(1);
    opacity: 1;
}
.screen-3__heading{
    transition: all 1s;
}
.screen-3__heading_animate_init{
    transform: translate(0,30%);
    opacity: 0;
}
.screen-3__heading_animate_done{
    transform: translate(0,0);
    opacity: 1;
}
.screen-3__subheading{
    transition: all 1s .2s;
}
.screen-3__subheading_animate_init{
    transform: translate(0,100%);
    opacity: 0;
}
.screen-3__subheading_animate_done{
    transform: translate(0,0);
    opacity: 1;
}
.screen-3-items{
    
    transition: all .5s 1.2s;
}
.screen-3-items_animate_init{
    transform: translate(0,200%);
}
.screen-3-items_animate_done{
    transform: translate(0,0);
}
.screen-3-item{
    animation: pulse 1s ;
}

@keyframes pulse{
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.1);
    }
    100%{
        transform: scale(1);
    }
}
/*第4屏*/
.screen-4__heading{
    transition: all 1s;
}
.screen-4__heading_animate_init{
    transform: translate(0,10%);
    opacity: 0;
}
.screen-4__heading_animate_done{
    transform: translate(0,0);
    opacity: 1;
}
.screen-4__subheading{
    transition: all 1s .2s;
}
.screen-4__subheading_animate_init{
    transform: translate(0,50%);
    opacity: 0;
}
.screen-4__subheading_animate_done{
    transform: translate(0,0);
    opacity: 1;
}
.screen-4__type__item_i_1,
.screen-4__type__item_i_2,
.screen-4__type__item_i_3,
.screen-4__type__item_i_4
{
    transition: all .7s;
}
.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
{
    transform: scale(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
{
    transform: scale(1);
}
/*第5屏*/
.screen-5__heading{
    transition: all 1s;
}
.screen-5__heading_animate_init{
    transform: translate(0,5%);
    opacity: 0;
}
.screen-5__heading_animate_done{
    transform: translate(0,0);
    opacity: 1;
}
.screen-5__subheading{
    transition: all 1s .2s;
}
.screen-5__subheading_animate_init{
    transform: translate(0,50%);
    opacity: 0;
}
.screen-5__subheading_animate_done{
    transform: translate(0,0);
    opacity: 1;
}
.screen-5-pic{
    transition: all .5s;
}
.screen-5-pic_animate_init{
    transform: scale(0.3);
}
.screen-5-pic_animate_done{
    transform: scale(1);
}
//获取元素
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);
    setCls(element,baseCls.split(cls).join(" ").replace(/\s+/g," "));
}

//第一步 初始化样式
var screenAnimateElements={
    ".screen-1":[
        ".screen-1__heading",
        ".screen-1__subheading",
    ],
    ".screen-2":[
        ".screen-2__heading",
        ".screen-2__subheading",
        ".screen-2-pic",
    ],
    ".screen-3":[
        ".screen-3-pic",
        ".screen-3__heading",
        ".screen-3__subheading",
        ".screen-3-items",
    ],
    ".screen-4":[
        ".screen-4__heading",
        ".screen-4__subheading",
        ".screen-4__type__item_i_1",
        ".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-pic",
    ]
}

function setScreenAnimateInit(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 basCls=element.getAttribute('class');//得到元素的类名
        element.setAttribute("class",basCls+" "+animateElements[i].substr(1)+"_animate_init");//重新设置类名
    }
}
//播放屏内的元素动画
function playScreenAnimateDone(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 basCls=element.getAttribute("class");
        element.setAttribute("class",basCls+" "+animateElements[i].substr(1)+"_animate_done");//重新设置类名
    }
}

window.onload=function(){
    for(k in screenAnimateElements){
        if(k===".screen-1"){
            continue;
        }
        setScreenAnimateInit(k);
    }
}

//第2步,滚动到哪里,就播放动画
window.onscroll=function(){
    var top=document.documentElement.scrollTop || document.body.scrollTop;
    if(top>60){
        addCls(getElem(".header"),'header_status_back');
        addCls(getElem(".outline"),"outline_status_in");
    }else{
        delCls(getElem(".header"),'header_status_back');
        delCls(getElem(".outline"),"outline_status_in");
        switchNavItemsActive(0);
    }

    if(top>1){
        playScreenAnimateDone(".screen-1");
        switchNavItemsActive(0);
    }
    if(top>640*1-100){
        playScreenAnimateDone(".screen-2");
        switchNavItemsActive(1);
    }
    if(top>640*2-100){
        playScreenAnimateDone(".screen-3");
        switchNavItemsActive(2);
    }
    if(top>640*3-100){
        playScreenAnimateDone(".screen-4");
        switchNavItemsActive(3);
    }
    if(top>640*4-100){
        playScreenAnimateDone(".screen-5");
        switchNavItemsActive(4);
    }
}
//第3步:点击跳转导航栏
var index=0;
var navitems=getAllElem(".header__nav-item");
for(var i=0;i<navitems.length;i++){
    navitems[i].setAttribute("data-id",i);
    navitems[i].onclick=function(){
        index=this.getAttribute("data-id");
        document.documentElement.scrollTop=index*640;
    }
}
//点击跳转,大纲
var outlineitems=getAllElem(".outline__item");
for(var i=0;i<outlineitems.length;i++){
    outlineitems[i].setAttribute("data-id",i);
    outlineitems[i].onclick=function(){
        index=this.getAttribute("data-id");
        document.documentElement.scrollTop=index*640;
    }
}
//鼠标放在按钮上,按钮的变化
var btn=document.getElementById("btn");
btn.onmousemove=function(){
    btn.style.backgroundColor="#c02c1f";
    btn.style.color="#fff";
}
btn.addEventListener("mouseout",function(){
    btn.style.backgroundColor="#f01400";
})

//导航大纲联动
var switchNavItemsActive=function(idx){
    for(var i=0;i<navitems.length;i++){
        delCls(navitems[i],"header__nav-item_status_active");
    }
        addCls(navitems[idx],"header__nav-item_status_active");
    for(var m=0;m<outlineitems.length;m++){
        delCls(outlineitems[m],"outline__item_status_active");
    }
        addCls(outlineitems[idx],"outline__item_status_active");
}
//点击立即学习后跳到第一屏
    var btn1=document.getElementById("screen-6__button");
    btn1.onclick=function(){
        document.documentElement.scrollTop=0;
    }

    //第一屏动画延迟播放
    setTimeout(function(){
        playScreenAnimateDone(".screen-1");
    },200);

    //滑动条
    var activeIdx=0;
    //第4步:滑动门特效
    var navTip=getElem(".header__nav-tip");
    for(var i=0;i<navitems.length;i++){
            navitems[i].setAttribute("data-id",i);
            navitems[i].onmouseover=function(){
            var index=this.getAttribute("data-id");
            navTip.style.left=(index*100)+"px";
        }
        navitems[i].onmouseout=function(){
            var index=this.getAttribute("data-id");
            for(var n=0;n<navitems.length;n++){
                    if(getCls(navitems[n]).indexOf("header__nav-item_status_active")>-1){
                    activeIdx=n;
                    break;
                }
            }
            navTip.style.left=(activeIdx*100)+"px";
        }
    }

老师,为什么我滑动滚动条时,导航下面的条不跟着动,还有当我刷新页面但不滑动页面的时候header部分总是1s后才出现。。该怎么改呀

正在回答

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

2回答

同学你好, 

  1. 如果想要只在滚动条开始滚动的时候,执行headerAnimate这个动画, 可以参考如下思路

    (1)用一个单独的类设置动画样式

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

    (2)上一条设置的header一开始不显示的样式可以删除了

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

    (3)在滚动条开始滚动的时候, 给头部添加header_active这个类,执行动画效果

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

  2. 第一屏的字会先从上面飞出来, 主要浏览器对transition属性的解析有差异造成的。如果同学想调整这种情况。

    建议: 将screen-1__heading设置的过度属性修改为给screen-1__heading_animate_done这个类下添加过渡属性。

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

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~~

好帮手慕慕子 2019-08-14 17:11:30

同学你好, 因为在滚动过程中, 没有设置导航下划线的left值跟随移动, 建议修改:

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

关于header这里, 同学的意思是,header一开始现实的, 1s后才消失然后在显示出来吗?如果是这样的话, 那么是因为一开始header是正常现实的, 延迟0.5s之后执行动画headerAnimate,让头部先应隐藏在显示

建议: 可以给header添加初始样式, 不让其显示

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

然后设置动画保持在结束状态, 让头部显示在页面中

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

如果不是指这里的话, 建议: 同学可以详细的描述一下,指的是哪里, 再次提问, 我们会继续为你解答的

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~

  • 老师理解的对,但是我想实现的是刷新页面的时候header一直是显示的样子,一直都不变,只有在滑动滚动条的时候,才执行headerAnimate这个动画,
    2019-08-14 18:39:01
  • 老师,还有一个疑问就是,我用谷歌浏览器打开页面的时候第一屏的两行字会先从上面飞出来,然后才显示正常,用火狐打开就没事,是什么原因呢,???
    2019-08-14 18:49:39
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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