手機站頂部效果,漸變背景色

/**
 * Created by zhousg on 2015/12/18.
 */
window.onload = function(){
    search();
};
/*頭部搜索*/
var search = function(){
    /*搜索框對象*/
    var search = document.getElementsByClassName('jd_header_box')[0];
    /*banner對象*/
    var banner = document.getElementsByClassName('jd_banner')[0];
    /*高度*/
    var height = banner.offsetHeight;

    window.onscroll = function(){
        var top = document.body.scrollTop;
        /*當滾動高度大於banner的高度時候顏色不變*/
        if(top > height){
            search.style.background  = "rgba(201,21,35,0.85)";
        }else{
            var op = top/height * 0.85;
            search.style.background  = "rgba(201,21,35,"+op+")";
        }
    };

};
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章