/*搜索区块的颜色变化*/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>
jQuery ?首页搜索区域模块随页面滑动而变化
原文地址:http://www.cnblogs.com/arealy/p/7765659.html