【JavaScript】悬浮窗口

最新推荐文章于 2023-04-07 16:52:49 发布

转载最新推荐文章于 2023-04-07 16:52:49 发布 · 420 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/363849

文章标签：

#javascript #ViewUI

本文介绍了一个使用JavaScript实现的页面滚动时跟随滚动的悬浮窗口案例。通过监听window.onscroll事件，实时更新悬浮窗口的位置，使其始终处于屏幕可见范围内。代码中还包括了页面加载时初始化内容的函数。

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

主要是window.onscroll的运用

效果如图：

代码如下：

< html >
     < head >
         < title > 悬浮窗口示例 </ title >
         < script type ="text/javascript" >
            window.onscroll = function () {
                 var div = document.getElementById( " divSuspended " );
                div.style.top = document.body.scrollTop;
            }
            window.onresize = window.onscroll;
             function init(){
                 var df = document.createDocumentFragment();
                 for ( var i = 0 ;i < 20 ;i ++ ){
                     var p = document.createElement( " p " );
                    p.appendChild(document.createTextNode( " Line " + i));
                    df.appendChild(p);
                }
                document.body.appendChild(df);
                window.onscroll();
            }
         </ script >
     </ head >
     < body onload ="init()" >
          < p > Try scrolling this window. </ p >
          < div id ="divSuspended" style ="position: absolute; buttom: 0px; right: 0px; color: #cccccc; width: 150px; height: 30px; background-color: navy" > 这是悬浮窗口 </ div >
     </ body >
</ html >

本文转自BlogJavaOo缘来是你oO的博客，原文链接：悬浮窗口【JavaScript】，如需转载请自行联系原博主。