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>
<!--回到顶部结束-->

时间: 2024-11-06 07:12:23

js和jquery获取文档对象以及滚动条位置的相关文章

jquery获取文档高度和窗口高度

jquery获取文档高度和窗口高度,$(document).height().$(window).height() $(document).height():整个网页的文档高度 $(window).height():浏览器可视窗口的高度 $(window).scrollTop():浏览器可视窗口顶端距离网页顶端的高度(垂直偏移) 用一句话理解就是:当网页滚动条拉到最低端时,$(document).height() == $(window).height() + $(window).scrollT

Js和jQuery的文档就绪函数以及执行次数

Js和jQuery的文档就绪函数以及执行次数 1:JS文档就绪函数: 采用onload方法: 2:jQuery文档就绪函数: 方法一:采用ready方法 方法二: 通过上面的两种方法可看出:利用方法二比较精简,方法二应用广泛 3. JS文档就绪函数的执行次数: ---js的文档就绪函数不能定义多个.如果定义多个,最后定义的文档就绪函数会覆盖之前的. 例如: 像上面这样,函数定义两个或者两个以上的时候,最后弹出的结果只有"2",因为后面定义的文档就绪函数会覆盖前面的. 4.jQuery文

jquery获取文档高度和窗口高度汇总

jquery获取窗口高度和窗口高度,$(document).height().$(window).height() $(document).height():整个网页的文档高度 $(window).height():浏览器可视窗口的高度 $(window).scrollTop():浏览器可视窗口顶端距离网页顶端的高度(垂直偏移) $(document.body).height();//浏览器当前窗口文档body的高度 $(document.body).outerHeight(true);//浏览

jquery获取文档高度和窗口高度问题

$(document).height():整个网页的文档高度 $(window).height():浏览器可视窗口的高度 经过测试 无论是窗口高度还是文档高度 ,其实值是相等的.都会随着浏览器窗口的缩放而变化, 注意: IE8下面 获取到的$(document).height()文档高度值,比实际高度多4px. 比如获取的是768px. 则文档的实际高度是764px.如果里面放的元素高度超过764px,则出现右侧滚动条. $(window).height()获取高度没这问题是实际高度. 切记 $

jquery获取文档高度

时至今日,网页早已不只在 pc 上运行了,还会在平板啊.手机啊.大型PC 上运行,那屏幕自适应就变得很重要,boostrap.css 自带的适应屏幕我们不谈,就光说说用代码来设置屏幕的自适应. 因为项目的页面中有些导航条啊,脚标啊,高度都是固定且不变的,所以获取然后重新设置高度变得简单,流程就是监听页面是否 size 发生变化,变化的话就调整该调整的布局,利用 jquery 获取当前页面的 width height 信息,然后计算出各个块所需要的数据,再进行设置.记录下监听以及获取屏幕宽高的方法

数组对象元素的添加,String对象,BOM对象以及文档对象的获取

数组对象的删除有三种方法: pop();        //移除最后一个元素并返回该元素值shift();      //移除最前一个元素并返回该元素值,数组中元素自动前移splice(0,2); //删除从指定位置deletePos开始的指定数量deleteCount的元素,数组形式返回所移除的元素通过这三种方法我们可以将数组中的元素按进行删除 var del = ["aa",23,345,56,34,"bb"]; var del_last = del.pop()

JS第二部分--DOM文档对象模型

DOM 一.DOM的概念 Document Object Model文档对象模型 万事万物皆对象: (DOM树中一切皆节点,节点是一个标签) document对象 | html对象 | | head对象 body对象 | | | | | | | | ...... DOM对象产生是为了让js操纵文档 对象有属性和方法 二.DOM可以做什么 1.找到元素节点(获取DOM) 2.设置标签属性值(对标签属性的操作) 3.设置标签的样式(对样式的操作) 4.设置标签的值 5.动态的创建和删除元素(对DOM

js基础,DOM 文档对象模型

DOM 文档对象模型 DOM (document object model) 文档对象模型,它定义了操作文档对象的接口. DOM 把一份html文档表示为一棵家谱树,使用parent(父), child(子), sibling(兄弟)等记号 来表明家庭成员之间的关系. 一.节点 节点(node) 一词来自于网络理论,这代表着网络中一个个的连接点,网络是由节点构成的. 对于html文档也是一样,文档是由节点构成的集合. 1.元素节点 元素节点如 <body> <p> <div&

[转载]js 和 jquery 获取页面和滚动条的高度 视口高度文档高度

转载自:http://www.cnblogs.com/rainbow661314/p/3317106.html js 和 jquery 获取页面和滚动条的高度 //页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight && window.scrollMaxY) {    // Mozilla scrW = window.innerWidth + window.scrollMaxX; scrH = w