遮罩的跟随属性html,跟随屏幕滚动层、遮罩层、获取Div相对定位、整个屏幕、html文档的jquery基本操作...

一、层跟随屏幕滚动

层1

层2

.div1{

background-color:#FF0000;

width:2000px;

height:2000px;

}

.div2{

background-color:#33FF66;

width:100px;

height:100px;

position:fixed;

left:50px;

top:50px;

}

(1)对文档、屏幕、层的一些jquery基本操作

var showAdminUser = function (obj) {

var offSet = $(obj).offset();

var docTop = offSet.top;    //当前元素相对文档top偏移位置

var docLeft = offSet.left;  //当前元素相对文档left偏移位置

var docWidth = $(document).width(); //整个页面文档的宽度

var docHeight = $(document).height();   //整个页面文档的高度

var dScrollTop = $(document).scrollTop(); //整个文档滚动条相对top位置

var wScrollTop = $(window).scrollTop(); //整个屏幕滚动条相对top位置

var winWidth = $(window).width(); //整个屏幕宽度

var winHeight = $(window).height();//整个屏幕高度

alert("docWidth: " + docWidth + "——" + "docHeight:" + docHeight + " dScrollTop:" + dScrollTop);

var dWidth = document.body.offsetWidth;  //纯javascript整个页面文档的宽度

var hHeight = document.body.offsetHeight;   //纯javascript整个页面文档的高度

var scrollTop = document.body.scrollTop + document.documentElement.scrollTop

alert(" docWidth: " + dWidth + " docHeight: " + hHeight + " : " + scrollTop);

}

(2)层伴随滚动条

$(document).ready(function () {

$(window).scroll(function () {

var scrollTop = $(document).scrollTop(); //htm文档滚动对象距离顶部位置

//alert(scrollTop);

var AdminUserStateDiv = $("#AdminUserStateDiv");

//AdminUserStateDiv.css("top", scrollTop + "px");

AdminUserStateDiv.animate({ "top": scrollTop + "px" }, 0);  //层伴随滚动条滚动，时时改变层对顶部的距离

//$("#scrollUl").animate({ "marginLeft": scrollposition + "px" }, 10);

})

});

(3)遮罩层和加载图片效果

       

var ShowLoadding = function () {

var width = $(window).width();

var height = $(window).height();

$("#loadding").css("left", width / 2);

$("#loadding").css("top", height / 2);

$("#loadding").show();

var top = $("#ListContent").offset().top;

var left = $("#ListContent").offset().left;

var width = $("#ListContent").width();

var height = $("#ListContent").height();

$("#CommonAlertMessageBackg").css({ "top": top, "left": left, "width": width, "height": height });

$("#CommonAlertMessageBackg").show();

};

var HideLoadding = function () {

$("#loadding").hide();

$("#CommonAlertMessageBackg").hide();

};

原文：http://www.cnblogs.com/BluceLee/p/4159447.html