MUI APP基于mui-scroll区域滚动的上滑顶部悬停IOS&Android不完全解决方案

前言：该解决方案是针对于需要实现顶部菜单上滑悬停且使用mui-scroll区域滚定无法获取到scroll.y或者scroll.y=0的情况，目前在安卓8以及IOS11系统上测试通过，性能表现良好。

贴码如下：

CSS

.brand-store-bar.dock-header-bar{position: fixed;top: 44px;z-index: 99;margin-top: 0;}  
.brand-bar-wrapper{height: 40px;}

HTML DOM结构

<div class="mui-content mui-scroll-wrapper" id="refreshContainer">  
    <div class="mui-scroll">  
          ...  
              <div class="brand-bar-wrapper">  
        <div id="tab" class="brand-store-bar mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-negative">  
            <a class="mui-control-item mui-active" >菜单项目1</a>  
            <a class="mui-control-item" >菜单项目2</a>  
        </div>  
    </div>  
</div>

JS

 var dockHeader = function(){  

                var wrapper         = mui('#refreshContainer')[0],  
                    barWrapper      = mui('.brand-bar-wrapper')[0],  
                    brandBar        = mui('#tab')[0],  
                    scroll          = mui('#refreshContainer').scroll();  

                //顶部悬停  
                var dock = function(){  
                    if (!brandBar.classList.contains('dock-header-bar')) {  
                        wrapper.appendChild(brandBar);  
                        brandBar.classList.add('dock-header-bar');  
                    }  

                }  

                //复原  
                var reset = function(){  
                    if (brandBar.classList.contains('dock-header-bar')) {  
                        barWrapper.appendChild(brandBar);  
                        brandBar.classList.remove('dock-header-bar');  
                    }  
                }  

                 //安卓停靠方式  
                var androidDock = function(){  
                    document.addEventListener('scroll', function(e) {  
                        window.pageYOffset > barWrapper.offsetTop ? dock() : reset();  
                    });  
                }  

                //IOS停靠方式  
                var iosDock = function(){  
                    wrapper.addEventListener('scroll', function(e) {  
                        scroll.y < -barWrapper.offsetTop ? dock() : reset();  
                    }, false);  
                }  

                //准备执行条件  
                var init = function(){  

                    if (mui.os.ios) {  
                        iosDock();  
                    }else{  
                        //安卓系统禁止系统滚动条  
                        document.body.addEventListener('touchmove', function (event) {  
                            event.stopPropagation();  
                        }, false);  
                        androidDock();  
                    }  
                }  

                init();  
            }