css:
.divTxt{ width:500px; height:500px; background:#f60; border:10px solid #000; margin:100px 0 0 100px; text-align:center; line-height:500px;}
<script>
var divPos = $(".divTxt").offset();
var PosL = divPos.left;
var PosT = divPos.top;
$(".divTxt").html("Left:" +PosL+",Top:" + PosT);
</script>
显示结果:
HTML同上
<script>
var divPos = $(".divTxt").innerWidth();
$(".divTxt").html("宽度:" +divPos);
</script>
显示结果:
HTML 同上
<script>
var divPos = $(".divTxt").outerWidth();
$(".divTxt").html("宽度:" +divPos);
</script>
显示结果:
HTMl:同上
<script>
$(this).scroll(function(){
var divPos = $(this).scrollTop();
alert(divPos)
})
</script>
网页可见区域高: document.body.clientHeight;
网页可见区域宽: document.body.offsetWidth (包括边线的宽);
网页可见区域高: document.body.offsetHeight (包括边线的宽);
网页正文全文宽: document.body.scrollWidth;
网页正文全文高: document.body.scrollHeight;
网页被卷去的高: document.body.scrollTop;
网页被卷去的左: document.body.scrollLeft;
网页正文部分上: window.screenTop;
网页正文部分左: window.screenLeft;
屏幕分辨率的高: window.screen.height;
屏幕分辨率的宽: window.screen.width;
屏幕可用工作区高度: window.screen.availHeight;
屏幕可用工作区宽度:window.screen.availWidth;
浮标:
HTML:css:同上
<script>
$(this).scroll(function(){
var divPos = $(this).scrollTop();
if(divPos == 0){
$(".t1").css({display:"none"});//当网页在顶部时,t1层隐藏
}
else{
$(".t1").css({display:"block"});
$(".t1").css("top",100 + $(this).scrollTop());
$(".t1").css("left",100 + $(this).scrollLeft());
}
})
</script>