2018-06-28

function searchEffect(){

    /*头部搜索块的js效果*/

    /*1.获取当前banner的高度*/

    var banner =document.querySelector(".jd_banner");

    var bannerHeight=banner.offsetHeight;

    /*获取header搜索块*/

    var search=document.querySelector(".jd_search");

    /*2.获取当前屏幕滚动时，banner滚动出屏幕的距离*/

    window.onscroll=function(){

        var offsetTop=document.body.scrollTop;

        console.log(offsetTop);

        /*3.计算比例值，获取透明度，设置背景颜色的样式*/

        var opacity = 0;

        /*判断，如果当banner还没有完全 滚出屏幕，那么才有必要计算透明度和设置透明度*/

        if(offsetTop < bannerHeight){

            opacity=offsetTop/bannerHeight;

            /*设置样式*/

            search.style.backgroundColor="rgba(233,35,34,"+opacity+")";

        }

    }

}