【移动端】点击上面弹窗（源生JS）document.querySelector

效果图为：有一种缓缓从上到下出现的效果-webkit-transform:translateY(-100%);到-webkit-transform:translateY(0%)的转变！

THML代码为：

<header class="clr">
        <a class="fl logo" href="http://m.leiphone.com"><img src="http://m.leiphone.com/resMobile/images/logo.jpg" width="100" alt=""></a>
        <form method="GET" action="http://m.leiphone.com/search">
            <span class="down-arrow">
               <div class="down-menu">
                    <i class="l1"></i>
                    <i class="l2"></i>
                    <i class="l3"></i>
               </div>
            </span>
        </form>
</header>
<!--弹窗 start-->
<div class="navbar-container">
     <div class="nav-fix-container">
          <div class="navbar clr">
               <div class="nav-column">
                    <h4>雷锋旗下</h4>
                    <ul>
                        <li class="zhiqu"><a href="" target="_blank"><i class="lg icon"></i><span class="site">知趣网</span><i class="arrow icon"></i></a></li>
                        <li class="zhiqu"><a href="" target="_blank"><i class="lg icon"></i><span class="site">知趣网</span><i class="arrow icon"></i></a></li>
                        <li class="zhiqu"><a href="" target="_blank"><i class="lg icon"></i><span class="site">知趣网</span><i class="arrow icon"></i></a></li>
                        <li class="zhiqu"><a href="" target="_blank"><i class="lg icon"></i><span class="site">知趣网</span><i class="arrow icon"></i></a></li>
                    </ul>
               </div>
          </div>
     </div>
</div>
<div class="nav-overlay"></div>

<!--弹窗 end-->

CSS代码为：

.navbar .nav-column{background: rgba(255,255,255,1); padding: 0 3%; position: absolute; top: 0; z-index: 10; width: 100%; overflow: hidden;-webkit-transition:all .25s ease-out; transition:all .25s ease-out; -webkit-transform:translateY(-100%);transform:translateY(-100%);}
.navbar-show .nav-column{-webkit-transform:translateY(0%);transform:translateY(0%);}

JS代码为

var G={};
G.$=function(sel,context){
  return (context || document).querySelector(sel);
};
G.hasClass = function(o, c) {
    var regexp = new RegExp("(^|\\s+)" + c + '(\\s+|$)');
    return regexp.test(o.className);
};
G.addClass=function(o,c){
    !G.hasClass(o,c) && (o.className +=' ' + c);
};
G.removeClass = function(o, c) {
    o.className = o.className.replace(new RegExp("(^|\\s+)" + c + '(\\s+|$)'), ' ');
}
G.toggleClass = function(o, c) {
    G.hasClass(o, c) ? G.removeClass(o, c) : G.addClass(o, c);
};
G.transition = function(obj,time,prop,fx){
    var fx = fx || 'linear';
    var prop = prop || 'all';
    var prefix = ['','-o-','-ms-','-webkit-','-moz-'];
    for(var i = 0; i < prefix.length; i++){
        obj.style[prefix[i] + 'transition'] = time / 1000 + 's ' + prop + ' ' + fx;
    }
}

;({
    initialize:function(){
      this.navColumn();
    },
    navColumn:function(){
      var btn=document.querySelector('.down-arrow');
      var nav=document.querySelector('.nav-fix-container');
      var column=document.querySelector('.nav-column');
      var ov=document.querySelector('.nav-overlay');
      var columnHeight=column.offsetHeight;
      var before,timer;
      //var navOffsetTop=document.querySelector('.nav-container').offsetTop();
      var move_down=function(){
          clearTimeout(timer);

      };
      var ovshow=function(){
         ov.style.display='block';
         setTimeout(function(){
           G.transition(ov,250);
           ov.style.opacity=1;
         },10);
      };
      var ovhide=function(){
           ov.style.opacity=0;
           setTimeout(function(){
               ov.style.display='none';
           },250);
      }
      btn.addEventListener('click',function(event){
            if(G.hasClass(nav,'navbar-show')){
             G.removeClass(nav,'navbar-show');
             ovhide();
            }else{
                 G.addClass(nav,'navbar-show');
             ovshow();
          }
      },false);
      ov.addEventListener('click',function(){
           G.removeClass(nav,'navbar-show');
         ovhide();
      },false);
      document.addEventListener('touchmove',function(event){
        if(G.hasClass(nav,'navbar-show')){
            event.preventDefault();
        }
      },false);
    }
}).initialize();

本地效果交互文件为：app\1\plug\effup_down\demo.html

线上效果交互文件为：http://m.leiphone.com/