js和jquery获取文档对象以及滚动条位置
<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{
width:2000px;
height:2000px;
}
.div2{
background-color:#33FF66;
width:100px;
height:100px;
position:fixed;
left:50px;
top:50px;
}
</style>
<script type="text/javascript">
var UpdateSaleEnable = function (sel) {
var optVal = $(sel).val();
var id = $(sel).attr("id").split('_')[1];
// alert(optVal + "--------" + id);
// $.ajax({
// type: 'post',
// url: "/System/DetailSaleInfoState", //Controller和action地址
// data: 'id=' + id + '&enableid=' + optVal, //参数
// success: function (data) {
// alert(data.message); //confirm
// },
// error: function (err) { alert(Promotions.messages.yichangcuowu); }
// });
$.ajax({
url: "/System/DetailSaleInfoState",
async: true,
data: { id: id, enableid: optVal },
type: "Post",
dataType: "json",
beforeSend: function () {
},
success: function (dataT) {
alert(dataT.message);
},
error: function (er) {
alert(er);
}
});
}
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);
}
$(document).ready(function () {
$(window).scroll(function () {
var scrollTop = $(document).scrollTop();
//alert(scrollTop);
var AdminUserStateDiv = $("#AdminUserStateDiv");
//AdminUserStateDiv.css("top", scrollTop + "px");
AdminUserStateDiv.animate({ "top": scrollTop + "px" }, 0);
//$("#scrollUl").animate({ "marginLeft": scrollposition + "px" }, 10);
})
});
</script>
<style type="text/css">
#back-to-top{height:24px}
p#back-to-top a span{margin-bottom:2px;}
p#back-to-top a span {border-radius:0;}
</style>
<div class="suggest" style="position:fixed; height:104px; bottom:100px; float:left; display:none; ">
<div class="suggestLeft" style="float:left;">
<p flag='0' id='myClose' style="display:block;left: 1126.5px; ">
<a href="javascript:showAdvice();">
<span style=" background:url('http://88db.cn/cn/html/advice/images/right-bg.jpg') no-repeat scroll 0px 0px; display:block; height:60px;line-height: 14px;overflow: hidden;width:23px;float:left;padding:20px 0 0 2px;color: #FF6600;text-align: center;text-decoration: none">意见反馈</span>
</a>
</p>
<p id="back-to-top" >
<a href="#top">
<span style="background:url('http://88db.cn/cn/html/advice/images/right-bg.jpg') no-repeat scroll -25px -80px; display:block; height: 24px;overflow: hidden;padding-top:0;width:25px">
</span>
</a>
</p>
</div>
</div>
<script type="text/javascript">
//当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
var width = $(document).width();
//alert("widt:"+width);
var offleft = width - 26;
if ($.browser.msie && ($.browser.version == "6.0")) {
//alert("ie6");
$("#back-to-top").css("position", "absolute");
$("#myClose").css("position", "absolute");
}
if ($.browser.msie) {
offleft = width - 47;
}
$(document).ready(function () {
//var offleft = width-47; //(width-990)/2+990;
$(".suggest").css("left", offleft + "px");
setTimeout($(".suggest").css("display", "block"), 10);
$("#back-to-top").css("left", offleft + "px");
$("#myClose").css("left", offleft + "px");
/****/
//alert("left4");
// $(window).scroll(function () {
// //alert("java");/****/
// if ($(window).scrollTop() > 100) {
// //width = $(document).width();
// //alert("widt:"+width);
// //offleft = width-40; //(width-990)/2+990; //25是反馈意见框的宽度
// //$(".suggest").css("left",offleft+"px");
// $("#back-to-top").fadeIn(500);
// //$(".suggest").fadeIn(500);
// } else {
// $("#back-to-top").fadeOut(500);
// //$(".suggest").fadeOut(500);
// }
// if ($.browser.msie && ($.browser.version == "6.0")) {
// var y = $(window).scrollTop() + 400;
// var backToY = y + 80;
// $("#back-to-top").css("top", backToY + "px");
// $("#myClose").css("top", y + "px");
// }
// });
//当点击跳转链接后,回到页面顶部位置
$("#back-to-top").click(function () {
$('body,html').animate({ scrollTop: 0 }, 100);
return false;
});
});
/****/
</script>
<!--回到顶部结束-->
js和jquery获取文档对象以及滚动条位置的更多相关文章
- js、jQuery 获取文档、窗口、元素的各种值
基于两年开发经验,总结了 javascript.jQuery 获取窗口.文档.元素的各种值 javascript: 文档:是整个document所有的内容 浏览器当前窗口文档body的宽度: docu ...
- jquery获取文档高度和窗口高度的例子
jquery获取文档高度和窗口高度,$(document).height().$(window).height() $(document).height():整个网页的文档高度 $(window).h ...
- jquery获取文档高度和窗口高度汇总
jquery获取窗口高度和窗口高度,$(document).height().$(window).height() $(document).height():整个网页的文档高度 $(window).h ...
- js和jQuery获取各种屏幕或文档的高度和宽度
1.jQuery获取文档或屏幕的高度 console.log($(window).height());//浏览器页面当前屏幕可见区域的高度 console.log($(document).height ...
- 数组对象元素的添加,String对象,BOM对象以及文档对象的获取
数组对象的删除有三种方法: pop(); //移除最后一个元素并返回该元素值shift(); //移除最前一个元素并返回该元素值,数组中元素自动前移splice(0,2); / ...
- JS第二部分--DOM文档对象模型
一.DOM的概念 二.DOM可以做什么 三.DOM对象的获取 四.事件的介绍 五.DOM节点标签样式属性的操作 六.DOM节点对象对值的操作 七.DOM节点-标签属性的操作(例如id class sr ...
- js 和 jquery 获取页面和滚动条的高度 视口高度文档高度
js 和 jquery 获取页面和滚动条的高度 //页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight & ...
- jquery.cookie 使用文档,$.cookie() 文档教程, js 操作 cookie 教程文档。
jquery.cookie 使用文档,$.cookie() 文档教程, js 操作 cookie 教程文档. jquery.cookie中的操作: jquery.cookie.js是一个基于jquer ...
- 使用jQuery匹配文档中所有的li元素,返回一个jQuery对象,然后通过数组下标的方式读取jQuery集合中第1个DOM元素,此时返回的是DOM对象,然后调用DOM属性innerHTML,读取该元素 包含的文本信息
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 链接与ELF文件格式的复习
在这里复习一下链接的知识: 什么是链接(linking):把源代码形成的模块独立编译后组装成一个整体的的过程叫做链接. 链接主要过程包括:地址和空间分配(address and storage all ...
- 在Java中怎样把数组转换为ArrayList?
翻译自:How to Convert Array to ArrayList in Java? 本文分析了Stack Overflow上最热门的的一个问题的答案,提问者获得了很多声望点,使得他得到了在S ...
- unity 3消 游戏
3消游戏跟着智能手机流行到现在已经有很长一段时间,unity实现的3消 https://github.com/textcube/match3action 截图如下: 在阅读源码的时候不难发现,Game ...
- [译] 开发者角度,王道之论:Android 与 Windows Phone
前几天,在codeproject搜索Silverlight资料,偶然看到这篇文章,耐心读了2遍,非常不错:文章通过访谈聊天形式叙述,2位主角目前在<斯法克斯国家工程学院>软件学院上学. 周 ...
- Linux 网络故障排查
1.第一步是要确认网卡本身是否工作正常?利用ping工具可以确认这点.输入ping 127.0.0.1 ,然后看是否正常ping 通? 这里的127.0.0.1 被称作主机的回环接口,是TCP/IP协 ...
- jQuery插件使用大全
1.jQuery datepicker日历插件使用说明 http://wenku.baidu.com/view/12804e1e59eef8c75fbfb3e3 2.jqueryFileUpload插 ...
- C# Winform中DataGridView的DataGridViewCheckBoxColumn使用方法
下面介绍Winform中DataGridView的DataGridViewCheckBoxColumn使用方法: DataGridViewCheckBoxColumn CheckBox是否选中 在判断 ...
- 查看linux系统版本命令
一.查看内核版本命令: 1) [root@SOR_SYS ~]# cat /proc/version Linux version 2.6.18-238.el5 (mockbuild@x86-012.b ...
- select标签用法
<select name="type" class="textarea" onchange='bbbb(this.value)' > <opt ...
- 每日一“酷”之Cookie
Cookie---Http Cookie 作用:Cookie模块定义一些类来解析和创建HTTP cookie首部 Cookie模块为大多数符合RFC 2109的cookie实现一个解析器.这个实现没有 ...