基于 JavaScript 的网页悬浮窗实现

以下代码片段展示了如何使用 JavaScript 在网页中实现一个简单的悬浮窗效果，该窗口会随页面滚动而保持相对位置不变。

var isIE = /msie/i.test(navigator.userAgent); 

function gID(id){ 
    return document.getElementById(id);
} 

// 悬浮窗函数
// 参数：层ID，记录上次滚动位置（默认可以为空，递归使用） 
function ScrollDiv(id, pScrollY) { 
    var ScrollY = document.documentElement.scrollTop || document.body.scrollTop; 

    if (pScrollY == null) { 
        pScrollY = 0; 
    }

    var moveTop = .1 * (ScrollY - pScrollY); 
    moveTop = (moveTop > 0) ? Math.ceil(moveTop) : Math.floor(moveTop);

    gID(id).style.top = parseInt(gID(id).style.top) + moveTop + "px";
    pScrollY = pScrollY + moveTop;

    setTimeout("ScrollDiv('" + id + "','" + pScrollY + "');", 50); 
}

// 增加事件动作，不冲突原来的事件
// 参数：对象，事件名称（带on），事件定义
function addObjEvent(obj, eventName, eventFunc) { 
    if (obj.attachEvent) { 
        obj.attachEvent(eventName, eventFunc); 
    } else if (obj.addEventListener) { 
        obj.addEventListener(eventName.substring(2), eventFunc, false);
    }
}

代码解析：

1. isIE 变量用于判断浏览器是否为 IE 浏览器。
2. gID(id) 函数用于简化 document.getElementById(id) 的写法。
3. ScrollDiv(id, pScrollY) 函数实现悬浮窗的核心逻辑，通过递归调用自身，动态调整悬浮窗的垂直位置，以达到始终跟随页面滚动的效果。
4. addObjEvent(obj, eventName, eventFunc) 函数用于为指定 DOM 元素添加事件监听器，兼容 IE 和其他主流浏览器。

该代码片段仅提供了一个基本的悬浮窗实现思路，实际应用中可能需要根据具体需求进行调整和扩展，例如：

• 可以通过修改 moveTop 的计算方式来调整悬浮窗滚动的速度和方式。
• 可以添加关闭按钮或其他交互元素，以增强用户体验。
• 需要注意悬浮窗的样式和布局，避免遮挡页面内容或影响用户操作。