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+")";

        }

    }

}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容