Js 滚动

最新推荐文章于 2025-04-02 00:02:01 发布

最新推荐文章于 2025-04-02 00:02:01 发布 · 165 阅读

【 JavaScript 】专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现网页元素定位的方法，并展示了如何根据当前页面的滚动位置来定位并显示弹出窗口。通过获取页面的滚动位置、可视区域尺寸等信息，实现了弹窗在屏幕上的精确定位。

function getPosition() {
    var top    = document.body.scrollTop;  
    var left   = document.body.scrollLeft;
    var height = document.body.clientHeight;
    var width  = document.body.clientWidth;
    return {top:top,left:left,height:height,width:width};
}

function showDiv(){
    var width  = 50;  //弹出框的宽度
    var height = 200;  //弹出框的高度
    
    var leftDiv    = document.getElementById("leftDiv");
    leftDiv.style.display  = "block";
    leftDiv.style.position = "absolute";
    leftDiv.style.zindex   = "999";
    leftDiv.style.width    = width + "px";
    leftDiv.style.height   = height + "px";
    var Position = getPosition();
    leftadd = (Position.width-width)/2;
    topadd  = (Position.height-height)/2;
    leftDiv.style.top  = (Position.top  + 10)  + "px";
    leftDiv.style.left = 20 + "px";
    
    //右边的     层
    var rightDiv    = document.getElementById("rightDiv");
    rightDiv.style.display  = "block";
    rightDiv.style.position = "absolute";
    rightDiv.style.zindex   = "999";
    rightDiv.style.width    = width + "px";
    rightDiv.style.height   = height + "px";
    var Position = getPosition();
    leftadd = (Position.width-width)/2;
    topadd  = (Position.height-height)/2;
    rightDiv.style.top  = (Position.top  + 10)  + "px";
    rightDiv.style.left = (Position.width-100) + "px";
    
    window.onscroll = function (){        
        var Position   = getPosition();
        leftDiv.style.top  = (Position.top  + 10)  +"px";
        leftDiv.style.left = 20+"px";
        //alert(Position.top);
        rightDiv.style.top  = (Position.top  + 10)  +"px";
        rightDiv.style.left = (Position.width-100) +"px";
    };
    
}