Javascript页面窗口悬浮实现

最新推荐文章于 2021-03-23 07:11:12 发布

转载最新推荐文章于 2021-03-23 07:11:12 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/webcc/archive/2012/05/29/2523495.html

文章标签：

#javascript #前端 #ViewUI

本文介绍如何使用HTML和JavaScript创建一个随浏览器滚动而浮动的悬浮窗口。通过设置div元素的位置属性并监听滚动事件，使得该窗口始终保持在屏幕的一侧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：在设计web页面时，有时会让某个窗口悬浮在页面某侧，并随浏览器滚动做相应浮动。

代码：
html代码
<div id="chatDiv" style="position: absolute; buttom: 0px; right: 0px; ">悬浮页面</div>

js代码
/*会话面板悬浮*/
window.onscroll = function () {
        var div = document.getElementById("chatDiv");
        div.style.top = document.body.scrollTop;
    };
    window.onresize = window.onscroll;
    window.onscroll();

说明：html代码中css设置id为chatDiv的div元素显示位置.js代码实现浏览器滚动条滚动与div显示位置。

转自：http://www.blogjava.net/eagle-daiq/archive/2009/07/01/285027.html

转载于:https://www.cnblogs.com/webcc/archive/2012/05/29/2523495.html