开发笔记: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 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>