滚动到指定的nav固定在顶部

上图是滚动前后的一个对比效果：

主要用到的是滚动条的监听，下面封装一段函数，如下：

// 封装一个兼容性的获取页面的头部或是左侧的函数
function scroll(){
    return　{
        scrollTop:window.pageYOffset || document.body.scrollTop ||document.documentElement.scrollTop|| 0,
        scrollLeft:window.pageXOffset || document.body.scrollLeft ||document.documentElement.scrollLeft|| 0
    }
}

然后是获取nav以上的两个最外层的div的高度，代码如下：

//监听页面滚动，使商品固定在顶部
window.onscroll = function(){
    //获取页面滚动条的滚动距离
    var scrollTop = scroll().scrollTop;

    //如果页面滚动条的滚动距离大于限时兑换和头部的距离就使nav固定定位，加fixed这个类

.fixed {
    position: fixed;
    top: 0;
    z-index: 20;
    width: 100%;
    overflow: hidden;
    background: #fff;
    padding-bottom: .1rem;
}
    if( scrollTop > topPart.offsetHeight+topHead.offsetHeight ){
        navBar.className = "shop_list-box fixed";
    }else{//否则取消
        navBar.className = "shop_list-box";
    }
};

这个效果就类似于京东，天猫等等的导航效果