悬浮窗口 onscroll实现

最新推荐文章于 2025-08-16 06:13:53 发布

原创最新推荐文章于 2025-08-16 06:13:53 发布 · 706 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#xhtml #div #function #html #server #测试

javascript 专栏收录该内容

5 篇文章

订阅专栏

本文探讨了基于HTML和JavaScript实现的滚动条触发悬浮窗口位移的技术细节，包括两种不同DOCTYPE声明方式下代码的区别及功能实现。

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

下面的代码

两种情况基于标准不一样

1.按 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 代码就是下面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>测试 悬乎窗口</title>

    <script type="text/javascript">
            window.onscroll = function () {
                var div = document.getElementById("demo");
                //div.style.top = document.body.scrollTop>0?document.body.scrollTop:document.documentElement.scrollTop+300+"px";//滑动的时候离头部300px
                div.style.top = document.body.scrollTop>0?document.body.scrollTop:document.documentElement.scrollTop;
            }
           
      
    </script>

</head>
<body>
    <div id="demo" style="position: absolute; color: #cccccc; width: 150px; height: 30px;
        background-color:#000">
        这是悬浮窗口
    </div>
    <div style="height: 1000px; width: 200px; background-color: #cccccc">
    </div>
</body>
</html>

2.按另外一种的话

代码如下：

<head runat="server">
    <title>测试 悬乎窗口</title>

    <script type="text/javascript">
            window.onscroll = function () {
                var div = document.getElementById("demo");
          
                div.style.top = document.body.scrollTop;
            }
           
      
    </script>

</head>
<body>
    <div id="demo" style="position: absolute; color: #cccccc; width: 150px; height: 30px;
        background-color: #000">
        这是悬浮窗口
    </div>
    <div style="height: 1000px; width: 200px; background-color: #cccccc">
    </div>
</body>
</html>