大家在上网时经常会看到有一些网页左侧、右侧或右下底部的广告图片,无论滚动条如何滚动这些内容一直在浏览器的固定位置。两种实现方式:
一:通过CSS3的position属性的值fixed,即固定定位。它的定位基准不是祖先元素,而是浏览器窗口。
二:通过JavaScript中的DOM对象获取元素位置设定。可以做成一个工具类,方便以后使用,不需要再调网页中元素的位置。
var adverTop;//层距页面顶端距离
var adverLeft;//层距页面左端距离
var adverObj;//层对象
function inits(){
adverObj=document.getElementById("float");//获得层对象
//IE浏览器
if(adverObj.currentStyle){adverTop=parseInt(adverObj.currentStyle.top);
adverLeft=parseInt(adverObj.currentStyle.left);
}else {
//其他浏览器
adverTop=parseInt(document.defaultView.getComputedStyle(adverObj,null).top);adverLeft=parseInt(document.defaultView.getComputedStyle(adverObj,null).left);
}
}
function move() {
var sTop=parseInt(document.documentElement.scrollTop || document.body.scrollTop);
var sLeft=parseInt(document.documentElement.scrollLeft || document.body.scrollLeft);
adverObj.style.top=adverTop+sTop+"px";
adverObj.style.left=adverLeft+sLeft+"px";
}
window.onload=inits;
window.onscroll=move;