弹出层随屏滚动

桃扇骨 2022-06-07 06:24 239阅读 0赞

一、层跟随屏幕滚动

（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);  
  
        \})  
    \});  
  
</script>

（3）遮罩层和加载图片效果

<div id="CommonAlertMessageBackg" style="display: none; height: 100%; left: 0; margin: 0; opacity: 0.7; position:absolute; top: 0; visibility: visible; width: 100%; z-index: 998; "> </div>　　//解释：position:absolute;是固定在屏幕上；position:fixed;是系在屏幕上，跟随着滚动条移动的；

[转载内容详情请点击打开链接][Link 1]

[Link 1]: http://www.cnblogs.com/BluceLee/p/4159447.html