一、层跟随屏幕滚动

<div style="width:120px;height:120px;border:1px solid red; position:absolute; left:800px; top:100px; z-index:1001;" id="AdminUserStateDiv">
        
        </div>
        <div class="div1">层1</div>
        <div class="div2">层2</div>

<style type="text/css">
        .div1{
    background-color:#FF0000;
    width:2000px;
    height:2000px;
    }

.div2{
    background-color:#33FF66;
    width:100px;
    height:100px;
    position:fixed;
    left:50px;
    top:50px;
    }
    </style>

<script>

(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;是系在屏幕上,跟随着滚动条移动的;

<div id="loadding" style="display: none; position: absolute; z-index: 999;">
        <img src="@Url.Content("~/Content/img/loading3.gif")" alt="加载中......" />
    </div>

<script type="text/javascript">
    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();
    };

</script>

跟随屏幕滚动层、遮罩层、获取Div相对定位、整个屏幕、html文档的jquery基本操作的更多相关文章

  1. z-index解决弹出层遮罩层覆盖子div不能显示输出的问题

    // 添加以下代码来进行测试: // ajax 发生错误,就会执行$('body').ajaxError(function(e, xhr, setting, text){    // e - even ...

  2. JavaScript -获取屏窗与视窗、文档宽高

    实例:1920*1080的电脑屏幕 1.获取窗口中的文档显示区域宽高 clientw = window.innerWidth; //1920(包含滚动条) clienth = window.inner ...

  3. C# 如何获取某用户的“我的文档”的目录

    Console.WriteLine(System.Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments)); System.E ...

  4. python之获取微信好友列表并保存文档中

    代码如下 from wxpy import * from pprint import pprint #登录微信 bot = Bot() my_friend = bot.friends() f = op ...

  5. 弹出页面遮罩层,以及web端和移动端阻止遮罩层的滑动。

    最近项目遇到了遮罩层的一些问题,总结一下: 弹出遮罩层 遮罩层弹出有非常多的方法,这里只写出本人用的代码,使用jq操作dom的方法进行实现的. <style>.box{position:a ...

  6. 通过了解JS的clientX、pageX、screenX等方法来获取鼠标位置相对屏幕,相对浏览器窗口,相对文档的坐标详解

    在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊 ...

  7. 在使用element-ui搭建的表格中,实现点击"定位"按钮后,屏幕滚动到对应行的位置

    背景: 一个后台管理系统,当管理员登录之后,会存在一个自己的id值, 在一个表格中,当点击"定位"按钮后,屏幕滚动到拥有管理员id的这一行,并且给设置一个高亮的背景 相关知识点: ...

  8. WPF中获取鼠标相对于屏幕的位置

    原文:WPF中获取鼠标相对于屏幕的位置 WPF中获取鼠标相对于屏幕的位置                                   周银辉WPF编程时,我们经常使用Mouse.GetPosi ...

  9. 获取打开的Word文档

    using Word = Microsoft.Office.Interop.Word; int _getApplicationErrorCount=0; bool _isMsOffice = true ...

随机推荐

  1. 链接器工具错误 LNK2011

    问题描述: 使用visual studio 2015编译apr-iconv失败,提示"链接器工具错误 LNK2011:未链接预编译对象:映像可能不能运行"错误. 原因分析: MSD ...

  2. Session id实现通过Cookie来传输方法及代码参考

    1. Web中的Session指的就是用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏览这个网站所花费的时间.因此从上述的定义中我们可以看到,Session实际上是一个特定的 ...

  3. Android手机一键Root原理分析

    图/文 非虫 一直以来,刷机与Root是Android手机爱好者最热衷的事情.即使国行手机的用户也不惜冒着失去保修的风险对Root手机乐此不疲.就在前天晚上,一年一度的Google I/O大会拉开了帷 ...

  4. PHP学习笔记 - 进阶篇(6)

    PHP学习笔记- 进阶篇(6) 会话控制(session与cookie) 当前的Cookie为: cookie简介 Cookie是存储在客户端浏览器中的数据,我们通过Cookie来跟踪与存储用户数据. ...

  5. (转)使用Amoeba 实现MySQL DB 读写分离

    Amoeba(变形虫)项目是一个开源框架,于2008年开始发布一款 Amoeba for Mysql软件: 这个软件致力于MySQL的分布式数据库前端代理层,它主要在应用层访问MySQL的时候充当SQ ...

  6. Linux小白最佳实践:《超容易的Linux系统管理入门书》(连载五)Linux系统的对话方式

    本篇是Linux小白最佳实践第5篇,目的就是让白菜们了解Linux进程之间是如何对话的.之前连载的几篇,在微信上引起了很多的反响,有人也反映图多文字少,感觉没有干货.本篇选了大部分是实战讲解的&quo ...

  7. TIMAC 学习笔记(一)

    TIMAC是TI公司推出的基于IEEE 802.15.4的通讯协议栈,编译环境为IAR,使用IAR自带的CLIB库,CLIB库提供了轻量级的C库,它不支持嵌入式C++.适用于RF4CE协议和ZigBe ...

  8. oracle 中proc和oci操作对缓存不同处理

    oracle 中proc和oci操作对缓存不同处理

  9. Qt移植 Window --Linux

    1.把源代码复制到Linux目录,使用qmake命令,注意在shell中直接使用qmake命令注意设置PATH环境变量 2. 在目录中会生成Makeflie文件 3. make即可 /usr/bin/ ...

  10. Linux系统下安装rz/sz命令及使用说明(转载)

    对于经常使用Linux系统的人员来说,少不了将本地的文件上传到服务器或者从服务器上下载文件到本地,rz / sz命令很方便的帮我们实现了这个功能,但是很多Linux系统初始并没有这两个命令.今天,我们 ...