码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-11-01 13:32:50      阅读:208      评论:0      收藏:0      [点我收藏+]

标签:onclick   sub   erb   sea   city   span   商品   oid   ann   

/*搜索区块的颜色变化*/
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 首页搜索区域模块随页面滑动而变化

标签:onclick   sub   erb   sea   city   span   商品   oid   ann   

原文地址:http://www.cnblogs.com/arealy/p/7765659.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!