顶部导航条和旁边的导航条都不能定位

// 获取元素
var getElem = function ( selector ) {
    return document.querySelector(selector);
}
// 获取所有元素
var getElemAll = 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) { // 如果baseCls这个样式中没有找到cls,则设置样式为
        setCls( element,baseCls+' '+cls);// 原样式baseCls+cls
    }
    return; 
}
// 给元素删除样式
var delCls = function ( element, cls ) {
    var baseCls = getCls(element);
    if (baseCls.indexOf(cls) !== -1) {
        setCls( element,baseCls.split(cls).join(' ').replace(/\s+/g,' '));
    }
    return; 
}

// 第一步 初始化样式init
var screenAnimateElements = {
    '.screen_1' : [
        '.screen_1_title',
        '.screen_1_photo',
        '.screen_1_shadow',
    ],
    '.screen_2' : [
        '.screen_2_title',
        '.screen_2_title_subheading',
        '.screen_2_photo',
        '.screen_2_point',
        '.screen_2_icon1',
        '.screen_2_icon2',
        '.screen_2_icon3',
    ],
    '.screen_3' : [
        '.screen_3_head',
        '.screen_3_subhead',
        '.screen_3_photo',
        '.screen_3_feature',
    ],
    '.screen_4' : [
        '.screen_4_heading',
        '.screen_4_subheading',
        '.screen_4_photocotent',
        '.screen_4_containerphoto1',
        '.screen_4_containerphoto2',
        '.screen_4_containerphoto3',
        '.screen_4_containerphoto4',
    ],
    '.screen_5' : [
        '.screen_5_heading',
        '.screen_5_subheading',
        '.screen_5_photo',
    ]
};
// 设置屏幕内元素为初始状态
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');
    }
}
//  第二步附加：初始化第一屏的动画（1. skipScreenAnimateInit 2.跳过 init ）

setTimeout(function(){playScreenAnimateDone('.screen_1');},100)

// 播放屏内元素动画
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 () {
    //    一旦载入就执行一边初始化
    for ( k in screenAnimateElements ) {
        if(k == '.screen_1'){
          continue;
    }
        setScreenAnimateInit(k);
    }
}

// 第二步 屏幕滚动到哪里就播放到哪里
/*****
        点击nav和outline不能跳转  本以为是不是声明位置的原因不对导致
        不能跳转的，经实验然，发现不是。问题待解决
            var navItems = getElemAll('.head_container_nav_item');
            var outlineItems = getElemAll('.outline_item');
        经过检查也发现getElemAll方法也没有错，也获取到了相应的正确的
        元素。
*****/
var navItems = getElemAll('.head_container_nav_item');
var outlineItems = getElemAll('.outline_item');
var switchNavItemsActive = function ( idx ) {

    for (var i = 0; i < navItems.length; i++) {
        delCls( navItems[i], 'head_container_nav_item_active');
    }
    addCls( navItems[idx], 'head_container_nav_item_active');

    for (var i = 0; i < outlineItems.length; i++) {
        delCls( outlineItems[i], 'outline_item_active');
    }
    addCls( outlineItems[idx], 'outline_item_active');
}
// 直接让0高亮
switchNavItemsActive(0);
window.onscroll = function () {
    /*** 
         document.documentElement.scrollTop 是用于有DTD声明的
         document.body.scrollTop 是用于没有DTD声明的
         为了到达练习效果，先使用了document.body.scrollTop
         后面需要改回来，按照标准来。
     ***/
    // var top = document.documentElement.scrollTop;
    var top = document.body.scrollTop;
    // console.log(top);
    if ( top>80 ) {
        addCls( getElem('.outline'),'outline_status_in');
        addCls( getElem('.head_container'), 'head_status_black');    
    }else {
        delCls( getElem('.head_container'), 'head_status_black');
        delCls( getElem('.outline'),'outline_status_in');

        switchNavItemsActive(0);
    }

    if ( top> (800*1 -100) ) {
        playScreenAnimateDone('.screen_2');
        switchNavItemsActive(1);
    }

    if ( top> (800*2 -100) ) {
        playScreenAnimateDone('.screen_3');
        switchNavItemsActive(2);
    }

    if ( top> (800*3 -100) ) {
        playScreenAnimateDone('.screen_4');
        switchNavItemsActive(3);
    }

    if ( top> (800*4 -100) ) {
        playScreenAnimateDone('.screen_5');
        switchNavItemsActive(4);
    }
}

// 第三步双向绑定

var navItems = getElemAll('.head_container_nav_item');
var outlineItems = getElemAll('.outline_item');


var setNavJump = function (i,lib) {
    var elem = lib[i];
    elem.onclick = function () {
        // console.log(i);
        document.body.scrollTop = i*800;
    }
}


for (var i = 0; i < navItems.length; i++) {
     setNavJump(i,navItems);
 }
for (var i = 0; i < outlineItems.length; i++) {
     setNavJump(i,outlineItems);
 }

 // 滑动门特效
var navTip = getElem('.head_container_nav_tip');
var setTip = function ( idx,lib ) {

    lib[idx].onmouseover = function () {
        // console.log(this.idx);
        navTip.style.left = (idx*52)+ 'px';
    }

    var activeIdx = 0;
    lib[idx].onmouseout = function () {
        // console.log(this.idx);
        for (var i = 0; i < navItems.length; i++) {
            if (getCls(lib[i]).indexOf('head_container_nav_item_active')) {
                activeIdx = i;
                break;
            } 
        }
        navTip.style.left = (idx*52)+ 'px';
    }
}

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

/*第一屏动画样式*/
.screen_1_shadow,
.screen_1_photo,
.screen_1_title {
    transition: all 1s;
}
.screen_1_shadow_animate_init,
.screen_1_title_animate_init {
    opacity: 0;
    transform: translate(0,100%);
}
.screen_1_shadow_animate_done,
.screen_1_photo_animate_done,
.screen_1_title_animate_done {
    /*在第一次写的时候错误的将opacity写成了0所以看不见这个模块*/
    opacity: 1;
    transform: translate(0,0);
}
.screen_1_photo_animate_init {
    opacity: 0;
    transform: translate(0,-100%);
}


/*第二屏动画样式*/
.screen_2_title,
.screen_2_title_subheading,
.screen_2_photo {
    transition: all 1s;
}
.screen_2_photo_animate_init,
.screen_2_title_subheading_animate_init{
    opacity: 0;
    transform: translate(0,100%);
}
.screen_2_title_animate_init {
    opacity: 0;
    transform: translate(0,-100%);
}
.screen_2_photo_animate_done,
.screen_2_title_subheading_animate_done,
.screen_2_title_animate_done {
    opacity: 1;
    transform: translate(0,0);
}


/*.screen_2_point {
    transition: all 1s 1s;
}
.screen_2_point_animate_init
 {
    opacity: 0;
    transform: translate(-100%,0);
}
.screen_2_point_animate_done
 {
    opacity: 1;
    transform: translate(0,0);
}*/



/*.screen_2_icon1,
.screen_2_icon2,
.screen_2_icon3*/ 
.screen_2_point{
    transition: all 0.5s 1s;
}
/*.screen_2_icon1_animate_done,
.screen_2_icon2_animate_done,
.screen_2_icon3_animate_done*/
 .screen_2_point_animate_done{
    opacity: 1;
    transform: translate(0,0);
}
.screen_2_icon1_animate_init
 {
    opacity: 0;
    transform: translate(-100%,0);
}
.screen_2_icon2_animate_init,
.screen_2_icon3_animate_init
 {
    opacity: 0;
    transform: translate(100%,0);
}


/*第三屏动画*/
.screen_3_feature,
.screen_3_head,
.screen_3_subhead,
.screen_3_photo {
    transition: all 1s;
}
.screen_3_head_animate_init,
.screen_3_subhead_animate_init{
    opacity: 0;
    transform: translate(-100%,0);
}
.screen_3_photo_animate_init{
    opacity: 0;
    transform: translate(0,100%);
}
.screen_3_head_animate_done,
.screen_3_subhead_animate_done,
.screen_3_photo_animate_done{
    opacity: 1;
    transform: translate(0,0);
}
.screen_3_feature_animate_init{
    opacity: 0;
    transform: scale(0.5);
}
.screen_3_feature_animate_done{
    opacity: 1;
    transform: scale(1);
}
.screen_3_feature_item {
    transition: all 1s;
}
.screen_3_feature_item:hover {
    transform: scale(1.1);
    border: 1px solid #fff;
    cursor: pointer;
}
/*第四屏*/
.screen_4_heading,
.screen_4_subheading,
.screen_4_photocotent{
    transition: all 1s;
}
.screen_4_photocotent_animate_init,
.screen_4_heading_animate_init,
.screen_4_subheading_animate_init{
    opacity: 0;
    transform: translate(0,100%);
}
.screen_4_photocotent_animate_done,
.screen_4_heading_animate_done,
.screen_4_subheading_animate_done{
    opacity: 1;
    transform: translate(0,0);
}

.screen_4_containerphoto1{
    transition: all 1s .5s;
}
.screen_4_containerphoto2{
    transition: all 1s 1s;
}
.screen_4_containerphoto3{
    transition: all 1s 1.5s;
}
.screen_4_containerphoto4{
    transition: all 1s 2s;
}

.screen_4_containerphoto1_animate_init,
.screen_4_containerphoto2_animate_init,
.screen_4_containerphoto3_animate_init,
.screen_4_containerphoto4_animate_init{
    opacity: 0;
}
.screen_4_containerphoto1_animate_done,
.screen_4_containerphoto2_animate_done,
.screen_4_containerphoto3_animate_done,
.screen_4_containerphoto4_animate_done{
    opacity: 1;
}

/*第五屏*/
.screen_5_heading,
.screen_5_subheading,
.screen_5_photo{
    transition: all 1s;
}

.screen_5_photo_animate_init{
    opacity: 0;
    transform: translate(0,100%);
}
.screen_5_photo_animate_done{
    opacity: 1;
    transform: translate(0,0);
}
.screen_5_subheading_animate_init{
    opacity: 0;
    transform: translate(0,100%);
}
.screen_5_heading_animate_init{
    opacity: 0;
    transform: translate(0,-100%);
}
.screen_5_subheading_animate_done,
.screen_5_heading_animate_done{
    opacity: 1;
    transform: translate(0,0);
}

/*设置帧动画*/
@-webkit-keyframes bounce {
        0%,100%{
            transform: scale(0);
        }
        50%{
            transform: scale(1);
        }
}

/*使用帧动画*/
.screen_2_point:after,
.screen_2_point:before {
    content: ' ';
    display: block;
    width: 20px; 
    height: 20px;
    position: absolute;
    top: 7px;
    /*left: 1px;*/
    background-color: rgba(255,0,0,0.4);
    -webkit-animation: bounce 2s infinite;
    border-radius: 50%;
}

.screen_2_point:before {
    -webkit-animation: bounce 2s infinite 1s; 
}

.screen_2_icon1:after,
.screen_2_icon1:before {
    left: 150px;
}

/*导航条 status back 样式*/
.head {
    transition: all 1s;
}

.head_status_black {
    background-color: rgba(0,0,0,.5);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 4;
}
.head_status_black .head_container_nav_item,
.head_status_black .head_container_logo {
    color: #fff;
}
.head_status_black .head_container_nav_item_active {
    color: #f01400;
}
/*侧边栏大纲 _status_in 样式*/
.outline {
    opacity: 0;
    transition: all 1s;
    transform: translate(100%,0);
}

.outline_status_in {
    opacity: 1;
    transform: translate(0,0);
}

.outline_item_active {
    color: #f01400;
}

.head_container {
    height: 80px;
    width: 1350px;
    background-color: #f7f7f7;
    position: relative;
}

.head_container_logo {
    width: 135px;
    height: 40px;
    color: #2b3137;
    font-size: 20px;
    line-height: 40px;
    text-indent: 50px;
    background: url(../img/logo.png) left center no-repeat;
    background-size: 38px 38px;
    position: absolute;
    top: 50%;
    margin-top: -26px;
    left: 80px;
}

.head_container_nav {
    position: absolute;
    width: 490px;
    height: 38px;
    right: 10px;
    top: 50%;
    margin-top: -18px;
}

.head_container_nav_item {
    color: #292f35;
    font-size: 16px;
    height: 38px
    line-height: 38px;
    display: inline-block;
    /*或者可以使用*/
    /*display: block;
    float: left;*/
    margin-right: 15px;
    position: relative;
}

.head_container_nav_item:hover {
    color: #f01400;
}

/*.head_container_nav_item_active {
    color: #f01400;
}*/

.head_container_nav_item_active::after{
    /*content: " ";*/
    /*下面这三句是设置伪元素的样式*/
    /*display: block;
    width: 100%;
    height: 2px;
    background-color: #f01400;*/
    /*下面要给这个块级元素定位,需要position为absolute,所以父元素也要设置position*/
    /*之后在具体调位置*/
    /*position: absolute;
    left: 0;
    bottom: -10px;*/
} 

.head_container_nav_item_button {
    width: 90px;
    height: 35px;
    line-height: 35px;
    background-color: #07111b;
    color: #f4f4f5;
    text-align: center;
    border-radius: 3px;
}

.head_container_nav_tip {
    position: absolute;
    width: 30px;
    height: 2px;
    background-color: #f01400;
    bottom: 0;
    left: 0;
    margin-left: 1px;
    transition: all .5s;
}



/*第一屏*/
.screen_1 {
    position: relative;
    height: 800px;
    background: url(../img/bg-screen-1.png);
    overflow: hidden;
} 

.screen_1_title {
    position: absolute;
    font-size: 40px;
    line-height: 40px;
    top: 210px;
    left: 432px;
}

.screen_1_title b {
    color: #f01400;
}

.screen_1_photo {
    width: 1375px;
    height: 305px;
    top: 340px;
    background: url(../img/screen-1-phone.png)  no-repeat center;
    position: absolute;
    background-size: 90%;
    z-index: 3; 
}

.screen_1_shadow {
    position: absolute;
    width: 1233px;
    height: 411px;
    top: 400px;
    background: url(../img/screen-1-shadow.png);
    z-index: 2;
    opacity: 0.8;
}

/*第二屏*/
.screen_2 {
    height: 800px;
    background-color: #fafafa;
    position: relative;
    overflow: hidden;
}

.screen_2_title {
    color: #f01400;
    font-size: 35px;
    text-align: center;
    position: absolute;
    top: 145px;
    left: 400px;
}

.screen_2_title_subheading {
    width: 500px;
    height: 30px;
    line-height: 30px;
    font-size: 15px;
    text-align: center;
    margin-top: 15px;
    position: absolute;
    top: 180px;
    left: 355px;
}

.screen_2_photo {
    width: 800px;
    height: 560px;
    background: url(../img/screen-2-phone.png) no-repeat;
    
    position: absolute;
    top: 280px;
    left: 300px;
}

.screen_2_icon1 {
    width: 170px;
    height: 35px;
    line-height: 35px;
    background: url(../img/icon-point-right.png) no-repeat right;
    position: absolute;
    top: 145px;
    left: -100px;
}
.screen_2_icon2 {
    width: 170px;
    height: 35px;
    line-height: 35px;
    background: url(../img/icon-point-left.png) no-repeat left;
    position: absolute;
    top: 35px;
    right: 50px;
    text-indent: 100px;
}
.screen_2_icon3 {
    width: 170px;
    height: 35px;
    line-height: 35px;
    background: url(../img/icon-point-left.png) no-repeat left;
    position: absolute;
    top: 375px;
    right: -55px;
    text-indent: 100px;
}

/*第三屏*/
.screen_3 {
    height: 800px;
    background: url(../img/bg-screen-3.png) no-repeat;
    background-size: cover;
    overflow: hidden;
}

.screen_3_container {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    position: relative;
}

.screen_3_head {
    color: #fff;
    float: left;
    top: 180px;
    position: absolute;
}
.screen_3_subhead {
    color: #fff;
    float: left;
    top: 248px;
    position: absolute;
    font-size: 14px;
}

.screen_3_feature {
    width: 310px;
    height: 290px;
    position: absolute;
    top: 380px;
    left: 20px;
}

.screen_3_feature_item {
    width: 138px;
    height: 118px;
    border: 1px solid #cd7173;
    border-radius: 3px;
    display: inline-block;
    margin-right: 12px;
    margin-bottom: 20px;
    color: #fff;
    text-align: center;
}

.screen_3_feature_item_num {
    margin-top: 30px;
    font-size: 25px;
}
.screen_3_feature_item_lan {
    margin-top: -5px;
}

.screen_3_photo {
    width: 750px;
    height: 610px;
    background: url(../img/screen-3-phone.png) no-repeat;
    overflow: hidden;
    top: 200px;
    right: 0;
    position: absolute;
}


/*第四屏*/
.screen_4 {
    height: 800px;
    background: #fff;
    overflow: hidden;
    position: relative;
}

.screen_4_heading {
    position: absolute;
    color: #f01414;
    top: 155px;
    left: 505px;
    font-size: 30px;
}
.screen_4_subheading {
    position: absolute;
    top: 220px;
    left: 555px;
    font-size: 14px;
}

.screen_4_photocotent {
    width: 1260px;
    height: 270px;
    position: absolute;
    margin: 0 auto;
    top: 305px;
    left: 100px;
    /*margin: 0 auto;*/
}

.screen_4_item {
    width: 220px;
    height: 270px;
    margin-right: 90px;
    float: left;
}

.screen_4_item_color {
    position: absolute;
    top: 290px;
    color: #2c3238;
    text-align: center;
    margin-left: 60px;
}

.screen_4_containerphoto1 {
    background: url(../img/phone-1.png) no-repeat;
}
.screen_4_containerphoto2 {
    background: url(../img/phone-2.png) no-repeat;
}
.screen_4_containerphoto3 {
    background: url(../img/phone-3.png) no-repeat;
}
.screen_4_containerphoto4 {
    background: url(../img/phone-4.png) no-repeat;
}
/*第五屏*/
.screen_5{
    height: 800px;
    position: relative;
    overflow: hidden;
    background: #d9dde1;
}

.screen_5_heading {
    position: absolute;
    top: 185px;
    left: 435px;
    font-size: 30px;
    color: #f01414;
}
.screen_5_subheading {
    position: absolute;
    top: 225px;
    left: 350px;
    font-size: 16px;
    color: #262c33;
}
.screen_5_photo {
    width: 1920px;
    height: 450px;
    left: 50%;
    margin-left: -860px;
    position: absolute;
    bottom: -100px;
    background: url(../img/bg-screen-5.png) no-repeat center;
    background-size: contain;
}

.screen_6 {
    height: 317px;
    background: url(../img/bg-screen-buy.png);
    position: relative;
}

.screen_6_button {
    height: 80px;
    line-height: 80px;
    text-align: center;
    width: 245px;
    background-color: #f01414;
    color: #f7a0a0;
    border-radius: 3px;
    position: absolute;
    top: 120px; 
    left: 555px;
    transition: all .5s;
}

.screen_6_button:hover {
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.outline {
    position: fixed;
    padding: 5px 10px;
    bottom: 240px;
    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;
    margin-top: 5px;
    border-top: 1px solid #eee;
    color: #39999f;
}

.outline_item:first-child {
    border: none;
}

.outline_item_active {
    color: red;
}
footer {
    height: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 16px;
    background-color: #07111b;
    color: #d2d2d3;
}