jQuery 首页搜索区域模块随页面滑动而变化

/*搜索区块的颜色变化*/
function search(){
    var searchBox = document.querySelector('.m_head');
    var bannerBox = document.querySelector('.m_banner');
    var classify =$('.m_classify a');
    var news = $('.home_news a');
    var oInput =$('.m_head .m_search input.input_bg');
    var h = bannerBox.offsetHeight;
    window.onscroll = function(){
        var top = document.body.scrollTop;
        var opacity = 0.2;
        if( top < h/2){
          opacity = top/h * 0.95;
            classify.removeClass('classify_h_ico').addClass('classify_ico');
            news.removeClass('news_h_ico').addClass('news_ico');
            oInput.css("border","none");
        }else{
            opacity = 0.98;
             classify.removeClass('classify_ico').addClass('classify_h_ico');
            news.removeClass('news_ico').addClass('news_h_ico');
            oInput.css("border","1px solid #eee");
        }
        searchBox.style.background = "rgba(255,255,255,"+opacity+")";
 
    }
}

<div class="m_head">
            <div class="m_classify">
                <a href="javascript:void(0);" onClick="showClass('',this);" status='0' class="classify_ico"></a>
            </div>
            <div class="m_search">
          <form name="theForm" id="theForm" action="" method="post">
                <input type="text" name="keyword" id="keyword" placeholder="搜索商品、店铺" class="input_bg">
                <a class="home_login" href="javascript:void(0);" onClick="javascript:jQuery('#theForm').submit();"></a>
                </form>
            </div>
          <div class="home_news"> <a href="" class="news_ico"></a>
           </div>
        </div>