通过js与css控制某一块div能随着窗口而移动

 红色标注的领域需要随着窗口的移动而移动，如何控制呢？
需要需要设定该区域的css属性：

该div需要有一个唯一id： layout-lt

.guding{background:url(../images/knj_img/knj_19.jpg) repeat-x; height:80px;
zoom:1; clear:both;
position:fixed;_position:absolute;
margin-left:196px;
}

 

然后需要js来控制：

<script>

(function(){
var win_h=document.documentElement.clientHeight;
document.getElementById('layout-lt').style.top=win_h-80+'px';   //46为底部抓潜的高度；窗口的高度-底部抓潜的高度
var ua = navigator.userAgent.toLowerCase(),  //IE6浏览器上下流动缓冲
	IE = !-[1,],
	isIE = /ie/.test( ua ),
	isIE6 = isIE && /msie 6/.test( ua );
	
function addEvent(obj, eventName,func){
    if (obj.addEventListener) {
        obj.addEventListener(eventName,func, false);
    } else if (obj.attachEvent) {
        obj.attachEvent("on" + eventName,func);

    }
}

var fun = function(){
	var oDiv_lt = document.getElementById('layout-lt');
	setLayout(oDiv_lt);
}

if(isIE6){
	addEvent(window,'scroll',fun);//触发滚动事件，调用fun方法
	window.onload = fun;
}

function setLayout(obj){
	
	if(!obj) return false; 
	var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
	
	var iTaget = parseInt(scrollTop+document.documentElement.clientHeight-obj.offsetHeight);
	startMove(obj,iTaget);
}

function startMove(objEle,iTaget){
	clearInterval(objEle.timeId);
	objEle.timeId = setInterval(function(){
		var iSpeed = (iTaget-objEle.offsetTop)/8;
		iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
		if(objEle.offsetTop == iTaget){
			clearInterval(objEle.timeId);
		}else{
			objEle.style.top=objEle.offsetTop+iSpeed+'px';
		}
	},30)
}
})()
<!--底部抓潜JS控制--end-->

</script>

 

这样就可以啦！

 

ps:

http://shop103421648.taobao.com/index.htm?spm=2013.1.w5002-1469269095.2.oOp4Qw

请大家支持一下苦逼程序员的淘宝！