码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-06-08 16:42:08      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:

        <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获取文档对象以及滚动条位置

标签:

原文地址:http://www.cnblogs.com/BluceLee/p/4561164.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!