我直接贴出代码:
<style type="text/css">
.county_cs{ position:fixed; top:0px; background-color:#cdcdcd; width:100%;}
</style>
<p id="xsun">xsun</p>
<script type="text/javascript">
var FixedBox = function (el) {
this.element = el;
this.BoxY = getXY(this.element).y;
}
FixedBox.prototype = {
setCss: function () {
var windowST = (document.compatMode && document.compatMode != "CSS1Compat") ? document.body.scrollTop : document.documentElement.scrollTop || window.pageYOffset;
if (windowST > this.BoxY) {
//this.element.style.cssText = "position:fixed; top:0px; background-color:#cdcdcd;width:100%";
$(this.element).addClass("county_cs");
} else {
$(this.element).removeClass("county_cs");
//this.element.style.cssText = "";
}
}
};
//添加事件
function addEvent(elm, evType, fn, useCapture) {
if (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent) {
var r = elm.attachEvent('on' + evType, fn);
return r;
}
else {
elm['on' + evType] = fn;
}
}
//获取元素的XY坐标;
function getXY(el) {
return document.documentElement.getBoundingClientRect && (function () {//取元素坐标,如元素或其上层元素设置position relative
var pos = el.getBoundingClientRect();
return { x: pos.left + document.documentElement.scrollLeft, y: pos.top + document.documentElement.scrollTop };
})() || (function () {
var _x = 0, _y = 0;
do {
_x += el.offsetLeft;
_y += el.offsetTop;
} while (el = el.offsetParent);
return { x: _x, y: _y };
})();
}
//实例化;
var pXsun = new FixedBox(document.getElementById("xsun"));
addEvent(window, "scroll", function () {
pXsun.setCss();
});
</script>
如对本文有疑问, 点击进行留言回复!!
【第138期】 游戏策划:应聘前HR要求把游戏玩到30级,怎么玩?
网友评论