CSS+jquery 实现滑动下拉框 DIV相对于浏览器固定位置

最新推荐文章于 2023-01-09 16:53:02 发布

qiufengwuxiu

最新推荐文章于 2023-01-09 16:53:02 发布

阅读量365

点赞数

Html代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<title>Anchor Properties</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta content="noindex, nofollow" name="robots">
<script>
function top(){
window.scrollTo(0,0);
}
function bottom(){
//scrollHeight属性是获取对象的滚动高度。
window.scrollTo(0,document.body.scrollHeight);
}
function left(){
//alert("left");alert(document.body.scrollLeft)
var left = 0-document.body.scrollWidth;//向左移动的像素
window.scrollBy(left,0 );
}
function right(){
//alert(document.body.scrollWidth);
//整个滚动条的宽度
window.scrollBy(document.body.scrollWidth,0);
}
        function init() {

            var oLayer = document.getElementById("BtnLeft") ;
            var oLayer_R = document.getElementById("BtnRight");
            //左边
            var init_pos = oLayer.offsetTop;
            var init_left = oLayer.offsetLeft;
            //右边
            var init_pos_R = oLayer_R.offsetTop;
            window.onscroll = function () {
                //document.body.scrollTop等于滚动滑块上端离滚动的开始点的距离
                var heightTop = document.documentElement.scrollTop || document.body.scrollTop;
                var left = document.documentElement.scrollLeft || document.body.scrollLeft;

                oLayer.style.top = heightTop+ init_pos;
                //scrollLeft设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
                //oLayer.style.posLeft = left + init_left;

                //document.body.scrollTop等于滚动滑块上端离滚动的开始点的距离
                oLayer_R.style.top = heightTop + init_pos_R;
                //scrollLeft设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
                //oLayer_R.style.posLeft = document.body.scrollLeft + init_Left_R;
                //alert(oLayer_R.style.posLeft);
            }
}
</script>
</head>
<body onload="init()">
<a onclick="bottom()">置底</a>
<div id="oLayer" style="position:absolute;left:120;top:60;z-index:2;background:green;width:120px;height:120px"> ddddd
</div>
<a onclick="right()">置 右</a>
<div style="width:1500px;height:30px;float:left">width="2000px"</div>
<a style="float:right" onclick="left()">置 左</a>
<a onclick="top()">置 顶</a>
</body>
</html>

原文地址：http://hbiao68.iteye.com/blog/1603621

qiufengwuxiu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS+jquery 实现滑动下拉框 DIV相对于浏览器固定位置

Html代码 > html> head> title>Anchor Propertiestitle> meta http-equiv="Content-Type" content="text/html; charset=utf-8"> meta content="noindex, nofollow" name="r
复制链接

扫一扫