一、层跟随屏幕滚动

<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. 第四十二篇、自定义Log打印

    1.在Xcode 8出来之后,需要我们去关闭多余的日志信息打印 2.在开发的过程中,打印调试日志是一项比不可少的工程,但是在iOS 10中NSLog打印日志被屏蔽了,就不得不使用自定义Log 3.去掉 ...

  2. Objective-C 【完整OC项目-购票系统-系统分析-代码实现】

    电影院买票系统/演唱会买票系统 需求分析: 首先我们进入系统,然后会选择买电影票还是买演唱会票,所以这牵扯两个系统的合成.但是我们知道都是买票系统,所以我们可以先创建一个类,属于购买电影票和演唱会的票 ...

  3. SQLite的简单应用

    安装部署 1)进入 SQL 下载页面:http://www.sqlite.org/download.html 2)下载预编译二进制文件包. Windows 环境的如下: 下载完之后,就算部署完成.(P ...

  4. JavaScript学习笔记(11)——HTML DOM Event对象

    w3cshool:时间参考手册:http://www.w3school.com.cn/jsref/dom_obj_event.asp

  5. vJine 第三波 之 Lua 来袭 vJine.Lua

    vJine.Lua vJine.Lua是Lua语言的C#封装库,可实现通过C#直接运行Lua脚本并与Lua脚本交互的功能. 1. 授权: MPL2.0 相关资源: nuget:(https://www ...

  6. es5 和 es6 class

    // ES5 function User(name,age) { this.name = name; this.age = age; } // 静态方法 User.getClassName = fun ...

  7. Apache使用mysql认证用户

    使用MySQL进行认证 第1步:下载MySQL认证模块,并更名为mod_auth_mysql.so文件,并保存在apache的modules目录下 第2步:apache要加载此功能模块 LoadMod ...

  8. [java学习笔记]java语言基础概述之数组的定义&常见操作(遍历、排序、查找)&二维数组

    1.数组基础 1.什么是数组:           同一类型数据的集合,就是一个容器. 2.数组的好处:           可以自动为数组中的元素从零开始编号,方便操作这些数据. 3.格式:  (一 ...

  9. Redirect and POST in ASP.NET

    http://www.codeproject.com/Articles/37539/Redirect-and-POST-in-ASP-NET

  10. L1范式和L2范式的区别

    L1 and L2 regularization add a cost to high valued weights to prevent overfitting. L1 regularization ...