JS 实现元素颜色跟随滚动条变化

最近在学习JS开发，突然想实现这样一个效果，滚动条往下拉时元素颜色由浅变深，于是就尝试做这样一个功能。

灰色深浅变化

滚动部分

滚动部分，计算出网页可以滚动的范围，同时监听滚动事件，然后使用计算颜色的变化，给目标加上相应的CSS样式即可。

    var scrollBegin = 200,      //颜色变化开始位置，自行定义
        scrollTop,              //当前滚动位置
        scrollArea;             //可滚动区域
        
	//计算可滚动区域
    scrollArea = (function () {
        if ($(document).height() > $(window).height()) {
        	// 可滚动高度 = 网页高度 - 视窗高度
            return $(document).height() - $(window).height();
        } else {
            return $(window).height();
        }
    })()

	//监听滚动
    $(window).scroll(function () {
    	//获取当前滚动位置
        scrollTop = $(this).scrollTop();
        
        //修改颜色
        ......
    })

颜色部分

最初想实现的效果内容在顶部时为浅色，滚动到底部变成深色。在RGB颜色上，这种灰色的颜色变化就是三个颜色的色值进行相同的变化。

这里涉及到RGB颜色模式的一些知识，RGB颜色模式就是红（R）、绿（G）、蓝（B）三原色以光的混合模式进行混合得到表现颜色，对应色值越高则该颜色的明度越高，也就是该颜色越明显，如RGB（255，0，0）表示红色光源最亮，绿色和蓝色光源最暗，这样得到的混合颜色最终表现为红色。
如果三个颜色色值均为最高，即为RGB（255，255，255），则混合而成的颜色为白色，反之RGB（0，0，0）则为黑色。因此介于之间的三色值相等的颜色即为不同深浅的灰色。

于是想要实现灰色从浅变深，则需要设置相同的RGB三种颜色的色值即可。需要的参数如下。

	var	topColor = 255,			//顶部颜色色值(浅灰色)，自行定义
    	bottomColor = 100,		//底部颜色色值(深灰色)，自行定义
		settingColor = 0,		//用于设置的颜色色值，计算得出
        
		originColor,            //元素本身的颜色
		colorValue;             //用于css样式赋值的颜色语句

	//获取对象本身颜色
   originColor = $(target).css("background-color");

关于色值，则是按照这个公式来计算。
$$色值=\frac{(顶部色值-底部色值)\ast (当前位置-开始位置)}{可滚动高度-开始位置}$$

其代码如下

		//监听滚动中 修改颜色... 的部分
        if (scrollTop < scrollBegin) {
        	//未到开始位置时，设置为初始颜色
            $(target).css({ "background-color": originColor });
        } else {
        	//开始颜色变化
        	//计算色值
            settingColor = topColor - ((topColor - bottomColor) * (scrollTop - scrollBegin) / (scrollArea - scrollBegin));
            //获得css样式赋值语句
            colorValue = "rgb(" + settingColor + "," + settingColor + "," + settingColor + ")";
            //颜色变化
            $(target).css({ "background-color": colorValue });
        }

完整JS代码

完整的JS代码如下，记得引入JQuery

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    var scrollBegin = 200,      //颜色变化开始位置
        scrollTop,              //当前滚动位置
        scrollArea,             //可滚动区域

        topColor = 255,         //顶部颜色色值
        bottomColor = 100,      //底部颜色色值
        settingColor,     		//计算出来用于设置的颜色色值

        originColor,            //元素本身的颜色
        colorValue,             //用于css样式赋值的颜色

        target = "body";  		//操作对象
	
	//获取对象本身颜色
	originColor = $(target).css("background-color");
	
    //计算可滚动区域
    scrollArea = (function () {
        if ($(document).height() > $(window).height()) {
            return $(document).height() - $(window).height();
        } else {
            return $(window).height();
        }
    })()
    
    //监听滚动
    $(window).scroll(function () {
    	//获取当前滚动位置
        scrollTop = $(this).scrollTop();
        
        //修改颜色
        if (scrollTop < scrollBegin) {
        	//未到开始位置时，设置为初始颜色
            $(target).css({ "background-color": originColor });
        } else {
        	//开始颜色变化
        	//计算色值
            settingColor = topColor - ((topColor - bottomColor) * (scrollTop - scrollBegin) / (scrollArea - scrollBegin));
            //获得css样式赋值语句
            colorValue = "rgb(" + settingColor + "," + settingColor + "," + settingColor + ")";
            //颜色变化
            $(target).css({ "background-color": colorValue });
        }
    })
</script>

直接对body元素使用这个样式，可以得到以下的效果

彩色变化

后来想了一下，可以拓展成彩色的变化，滚动部分内容基本相同，改变颜色的部分，即可实现彩色变化的效果。

颜色部分修改

首先，如果要让颜色实现彩色变化，那么三原色色值上的变化肯定不相同了，为了方便使用，定义了一个颜色的构造函数。

	//颜色构造函数
    function RGB(r, g, b) {
        this.red = r;
        this.green = g;
        this.blue = b;
        //获取颜色赋值语句
        this.getValue = function () {
            return "rgb(" + this.red + "," + this.green + "," + this.blue + ")";
        }
    }

然后对顶部颜色和底部颜色的三原色都计算色值变化

    //色值计算公式
    function colorCalc(top, bottom) {
        return top - ((top - bottom) * (scrollTop - scrollBegin) / (scrollArea - scrollBegin));
    }
    
    //红色色值
    settingColor.red = colorCalc(topColor.red, bottomColor.red);
    //绿色色值
    settingColor.green = colorCalc(topColor.green, bottomColor.green);
    //蓝色色值
    settingColor.blue = colorCalc(topColor.blue, bottomColor.blue);
    //目标赋值
    $(target).css({ "background-color": settingColor.getValue() });
    }

修改后的彩色变化JS完整代码

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    var scrollBegin = 200,      //颜色变化开始位置
        scrollTop,              //当前滚动位置
        scrollArea,             //可滚动区域

        topColor,               //顶部颜色色值
        bottomColor,            //底部颜色色值
        settingColor,           //计算出来用于设置的颜色色值
        originColor,            //元素本身的颜色

        target = "body";        //操作对象
        
	//获取对象本身颜色
    originColor = $(target).css("background-color");
    
	//颜色构造函数
    function RGB(r, g, b) {
        this.red = r;
        this.green = g;
        this.blue = b;
        //获取颜色赋值语句
        this.getValue = function () {
            return "rgb(" + this.red + "," + this.green + "," + this.blue + ")";
        }
    }
    
	//颜色设置
    topColor = new RGB(156, 80, 80);			//顶部颜色，自定义
    bottomColor = new RGB(201, 230, 162);		//底部颜色，自定义
    settingColor = new RGB(255, 255, 255);		//设置使用，计算得出

    //计算可滚动区域
    scrollArea = (function () {
        if ($(document).height() > $(window).height()) {
            return $(document).height() - $(window).height();
        } else {
            return $(window).height();
        }
    })()

    //色值计算公式
    function colorCalc(top, bottom) {
        return top - ((top - bottom) * (scrollTop - scrollBegin) / (scrollArea - scrollBegin));
    }
    
    //监听滚动
    $(window).scroll(function () {
    	//获取当前滚动位置
        scrollTop = $(this).scrollTop();
        	
        if (scrollTop < scrollBegin) {
        	//未到开始位置时，设置为初始颜色
            $(target).css({ "background-color": originColor });
        } else {
        	//开始颜色变化
            //红色色值
            settingColor.red = colorCalc(topColor.red, bottomColor.red);
            //绿色色值
            settingColor.green = colorCalc(topColor.green, bottomColor.green);
            //蓝色色值
            settingColor.blue = colorCalc(topColor.blue, bottomColor.blue);
            //目标赋值
            $(target).css({ "background-color": settingColor.getValue() });
        }
    })
</script>

得到的效果如下