手机站顶部效果，渐变背景色

大宅广

于 2016-07-12 12:15:58 发布

阅读量1k

点赞数 1

分类专栏： javascript 文章标签：手机微信 css HTML5

本文链接：https://blog.youkuaiyun.com/u011147065/article/details/51887921

版权

javascript 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的网页头部搜索效果。通过监听页面滚动事件，改变搜索框背景颜色，达到美观且实用的效果。当滚动条超过指定区域时，搜索框背景颜色将固定为半透明红色；未超过时，则根据滚动距离渐变。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

};